Переместить раскрывающееся меню, если у края окна - PullRequest
Новая
       44

Переместить раскрывающееся меню, если у края окна

3 голосов
/ 09 июня 2011

Я использую следующий код, чтобы переместить мои выпадающие меню, если они выходят за пределы области окна браузера.Однако это не работает в Internet Explorer 7 и 8. 

jQuery(document).ready(function(){
jQuery("#nav>ul>li").each(function() {
    pos = jQuery(this).offset();
    if(pos.left + 100 > jQuery(window).width()+window.pageXOffset-jQuery(this).width()) {
    jQuery(this).addClass("nav-shift");}
});
});

Ответы [ 2 ]

5 голосов
/ 09 июня 2011

Свойство window.pageXOffset не поддерживается в IE (по крайней мере, 7 и 8).Попробуйте $(window).offset().left вместо: 

jQuery(document).ready(function(){
    jQuery("#nav>ul>li").each(function() {
        pos = jQuery(this).offset();
        if(pos.left + 100 > jQuery(window).width()+jQuery(window).offset().left-jQuery(this).width()) {
        jQuery(this).addClass("nav-shift");}
    });
});

Более читабельно, ИМО: 

jQuery(document).ready(function() {
    jQuery("#nav > ul > li").each(function() {
        var $this = jQuery(this),
            $win = jQuery(window);

        if ($this.offset().left + 100 > $win.width() + $win.offset().left - $this.width()) {
            $this.addClass("nav-shift");
        }
    });
});
3 голосов
/ 09 июня 2011

Я использую этот код: 

var absoluteLeft   = $(this).offset().left;
var absoluteTop    = $(this).offset().top;
var absoluteRight  = absoluteLeft + $(this).outerWidth();
var absoluteBottom = absoluteTop + $(this).outerHeight();

var viewportRight  = $(window).width()  + $(window).scrollLeft(); // scroll left will take into account the position of the horizontal scrollbar
var viewportBottom = $(window).height() + $(window).scrollTop();  // scroll top will take into account the position of the vertical scrollbar

if (absoluteRight > viewportRight) {
    // do whatever to handle horizontal bleeding
}
if (absoluteBottom > viewportBottom) {
    // do whatever to handle vertical bleeding
}

Не было никаких проблем в IE.Код предполагает абсолютное позиционирование.

...