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

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

IE中不支持 window.pageXOffset属性（至少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中没有任何问题。 代码假设绝对定位。