帮助滚动/关注侧栏

使用jquery技术从css-tricks.com有一个滚动/后面的侧边栏，如果你不知道我在说什么，这里是代码：

$(function() { var $sidebar = $("#scroll-menu"), $window = $(window), offset = $sidebar.offset(), topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); }); 

这里也是链接http://css-tricks.com/scrollfollow-sidebar/

我遇到的唯一问题是它有一个容器，但是当你滚动到页脚足够大时，侧边栏会滚出容器。 有没有办法限制它向下滚动多远？

以下是正在发生的事情的图像： http ： //tinypic.com/r/2mcj2mv/7

提前致谢

Answer 1

您只需要添加一个额外的条件语句，如果$(window).scrollTop()大于某个阈值，则该语句不执行任何操作。 问题在于设置该阈值，因为我假设您希望它在不同高度的页面上工作。 幸运的是，我们可以使用页脚的偏移量和侧边栏的高度来确定此阈值。 以下可能需要针对您的特定情况进行一些调整，但基本上：

 $(function() { var $sidebar = $("#scroll-menu"), $window = $(window), $footer = $("#footer"), // use your footer ID here offset = $sidebar.offset(), foffset = $footer.offset(), threshold = foffset.top - $sidebar.height(); // may need to tweak topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > threshold) { $sidebar.stop().animate({ marginTop: threshold }); } else if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); });