根据滚动位置固定切换位置

我有以下代码修复菜单的位置，它将滚动到页面顶部。

$(function () { var msie6 = $.browser == 'msie' && $.browser.version = top) { $('.menu').addClass('fixed'); } else { $('.menu').removeClass('fixed'); } }); } }); 

CSS

 .container { width:400px; margin:auto; } .header { background-color:#096; height:150px; } .fixed { position:fixed; top:0px; left:50%; margin-left:50px; } .bodyContainer { overflow:hidden; } .menu { float:right; width:150px; height:250px; background-color:#F00; } .bodyCopy { float:left; width:250px; height:1000px; } .footer { background-color:#096; height:250px; } 

HTML

 
 
 
Test Header
 
 
 
 
test
 
 
 
test
 
 
 
 
Test Footer
  

我现在想要做的是当用户到达页面底部时让它再次开始滚动（这样它就不会覆盖页面中的页脚）。

在这里jsfiddle …

Answer 1

 var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0)); var _height = $('.menu').height(); $(window).scroll(function(event) { var y = $(this).scrollTop(); var z = $('.footer').offset().top; if (y >= top && (y+_height) < z) { $('.menu').addClass('fixed'); } else { $('.menu').removeClass('fixed'); } }); 

http://jsfiddle.net/AlienWebguy/CV3UA/1/

如果您希望菜单在到达页脚时保持原样，您需要添加更多逻辑以将其附加到DOM中：

 var msie6 = $.browser == 'msie' && $.browser.version < 7; if (!msie6) { var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0)); var _height = $('.menu').height(); var _original_top = $('.menu').offset().top; $(window).scroll(function(event) { var y = $(this).scrollTop(); var z = $('.footer').offset().top; if (y >= top && (y + _height) < z) { $('.menu').insertBefore($('.bodyCopy')).removeClass('stuck-bottom').addClass('fixed'); } else { if ((y + _height) >= z) { $('#menu').insertBefore($('.footer')).removeClass('fixed').addClass('stuck-bottom'); } else $('.menu').insertBefore($('.bodyCopy')).removeClass('stuck-bottom').removeClass('fixed'); } }); } 

我确信有更优雅的方式来做到这一点。 玩耍:) http://jsfiddle.net/AlienWebguy/CV3UA/2/

Answer 2

这是css3的新方法。

使用position:sticky跟随滚动。

这是文章解释。

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

这个演示的老方法

与粘性位置演示