Question

我正在使用以下代码重新定位我的下拉菜单，如果它们落在浏览器窗口区域之外。但是，它在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");}
});
});

Answer 1

window.pageXOffset属性为not supported in 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");}
    });
});

更具可读性，IMO：

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");
        }
    });
});

Answer 2

我使用此代码：

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中没有任何问题。该代码假设绝对定位。

如果靠近窗口边缘，则重新定位下拉菜单

2 个答案: