jQuery滚动DIV：当DIV到达页脚时停止滚动

我有#sidebar （从我的#header div下面开始）和#footer （页面底部大约120px）。

我正在尝试使用页面内容滚动侧边栏。 下面的代码半成功完成：

 /* profile sidebar */ #sidebar>div{ width: 300px; margin-top: 10px; } #sidebar.fixed>div{position:fixed;top:0;} #sidebar.fixed_bottom>div{position:fixed;bottom:172px;} jQuery(function ($) { $.fn.scrollBottom = function() { return $(document).height() - this.scrollTop() - this.height(); }; var el = $('#sidebar'), pos = el.position().top; $(window).scroll(function() { if ($(this).scrollTop() >= pos) { if ( $(this).scrollBottom() <= 172 ) { el.removeClass('fixed'); el.addClass('fixed_bottom'); } else { el.removeClass('fixed_bottom'); el.addClass('fixed'); } } else { el.removeClass('fixed'); } }); }); 

问题是，在较小的分辨率下，一旦到达页面上的某个位置，这会使侧边栏“跳跃”。 它阻止它重叠页脚（如果你删除fixed_bottom类，这是问题），但看起来不好。

我想做的是：用户滚动到页面底部，侧边栏与内容一起滚动，直到它达到我的页脚顶部上方20px，此时它保持在那里直到用户向上滚动。

提前致谢，

Answer 1

我相信这应该做你想要的。

http://jsfiddle.net/FDv2J/3/

 #sidebar>div{ width: 100px; margin-top: 10px; position:fixed; left: 0; top: 0;} 

---

 $(function() { $.fn.scrollBottom = function() { return $(document).height() - this.scrollTop() - this.height(); }; var $el = $('#sidebar>div'); var $window = $(window); $window.bind("scroll resize", function() { var gap = $window.height() - $el.height() - 10; var visibleFoot = 172 - $window.scrollBottom(); var scrollTop = $window.scrollTop() if(scrollTop < 172 + 10){ $el.css({ top: (172 - scrollTop) + "px", bottom: "auto" }); }else if (visibleFoot > gap) { $el.css({ top: "auto", bottom: visibleFoot + "px" }); } else { $el.css({ top: 0, bottom: "auto" }); } }); }); 

我试图分解并以可以理解的方式命名变量。 如果你有任何不确定的地方，请告诉我。 请注意，我添加了resize以及滚动，因为如果窗口改变大小，这很重要。

编辑：修改版使用类似的技术，以原来找到上限：

http://jsfiddle.net/FDv2J/4/

 $(function() { $.fn.scrollBottom = function() { return $(document).height() - this.scrollTop() - this.height(); }; var $el = $('#sidebar>div'); var $window = $(window); var top = $el.parent().position().top; $window.bind("scroll resize", function() { var gap = $window.height() - $el.height() - 10; var visibleFoot = 172 - $window.scrollBottom(); var scrollTop = $window.scrollTop() if (scrollTop < top + 10) { $el.css({ top: (top - scrollTop) + "px", bottom: "auto" }); } else if (visibleFoot > gap) { $el.css({ top: "auto", bottom: visibleFoot + "px" }); } else { $el.css({ top: 0, bottom: "auto" }); } }).scroll(); }); 

 body{ margin: 0; } #sidebar>div { width: 100px; height: 300px; margin-top: 10px; background-color: blue; position: fixed; } #stuff { height: 1000px; width: 300px; background-image: url("http://placekitten.com/100/100") } #footer, #header { height: 172px; width: 300px; background-color: yellow; } 

  
 
 
sidebar