如果向下滚动屏幕，请将div粘贴到屏幕顶部
我有一个div，当我的网页第一次加载时，从顶部大约100px（它拥有一些button等页面）。
当用户滚动过去时，我想让div“跟随”用户，因为它附着在屏幕的顶部。 当用户返回到页面顶部时，我希望它回到原来的位置。
Visualization - xxxxx is the div: Default (page load) User vertically scrolled well past it --------- --------- | | |xxxxxxx| < after div reaches top of screen when |xxxxxxx| | | page is scrolled vertically, it stays | | | | there --------- --------- 诀窍是你必须将它设置为position：fixed，但是只有在用户滚动过去之后。
这是做这样的事情，附加一个处理程序的window.scroll事件
// Cache selectors outside callback for performance. var $window = $(window), $stickyEl = $('#the-sticky-div'), elTop = $stickyEl.offset().top; $window.scroll(function() { $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop); });
这只是简单地添加了一个sticky CSS类，当页面滚动过去，并在备份时删除类。
而CSS类看起来像这样
#the-sticky-div.sticky { position: fixed; top: 0; }
编辑 – 修改代码来cachingjQuery对象，现在更快。
使无限的答案没有闪烁工作的诀窍是把滚动检查另一个div，然后你想要修复。
源代码viixii.com使用我结束了使用这个：
function sticky_relocate() { var window_top = $(window).scrollTop(); var div_top = $('#sticky-anchor').offset().top; if (window_top > div_top) $('#sticky-element').addClass('sticky'); else $('#sticky-element').removeClass('sticky'); } $(function() { $(window).scroll(sticky_relocate); sticky_relocate(); });
这样，只有到达sticky-anchor时才调用该函数，因此不会在每个滚动事件中删除和添加“.sticky”类。
现在，粘滞的锚到达顶部时，它增加粘性类，一旦粘性锚返回到视图中，它将被移除。
只需将一个空的div与类似于您想要修复的元素上方的锚点的类相关联即可。
像这样：
<div id="sticky-anchor"></div> <div id="sticky-element">Your sticky content</div>
代码的所有功劳归于viixii.com
你应该尝试jQuery插件的航点。
http://imakewebthings.com/waypoints/shortcuts/sticky-elements/
我认为它确实是你想要的，没有闪烁。 不过从内存来看，我觉得在Mobile Safari（YMMV）中效果不好。
纽约时报最近就是一个很好的例子：
http://www.nytimes.com/interactive/2010/11/13/weekinreview/deficits-graphic.html
页面中的框图不会从页面的顶部滚动。
以前有一个问题 （没有答案）给出了这个function的一个很好的例子 。 你可以检查相关的源代码的细节 （search“工具栏”），但基本上他们使用webdestroya的解决scheme和一些JavaScript的组合：
- 页面加载和元素的位置是：static
- 在滚动时，位置被测量，如果元素位置：静态，并且它离开页面，则元素被翻转到位置：固定。
虽然我build议检查前面提到的源代码，因为它们确实处理了一些你可能不会马上想到的“陷阱”，比如在点击链接时调整滚动位置。
我为此创build了一个jQuery插件。 希望得到一些反馈，因为这是我的第一个。 https://github.com/dubroe/sticky-div
使用position:fixed; 并设置top:0;left:0;right:0;height:100px; 你应该能够“坚持”到页面的顶部。
<div style="position:fixed;top:0;left:0;right:0;height:100px;">Some buttons</div>
