我有一个 div，当我的页面第一次加载时，它离顶部大约 100 像素（它包含页面的一些按钮等）。
当用户滚动通过它时，我希望 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;
}
编辑 - 修改代码以缓存 jQuery 对象，现在速度更快。
使无穷大的答案在没有闪烁的情况下工作的技巧是将滚动检查放在另一个 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”类。
现在，它在粘性锚到达顶部时添加粘性类，并在粘性锚返回视图后将其删除。
只需在要修复的元素上方放置一个空的 div，该 div 的作用就像一个锚点。
像这样：
<div id="sticky-anchor"></div>
<div id="sticky-element">Your sticky content</div>
代码的所有功劳都归于 viixii.com
今天有一个以前的问题（没有答案）给出了这个功能的一个很好的例子。您可以查看相关的源代码以了解详细信息（搜索“工具栏”），但基本上它们结合使用了 webdestroya 的解决方案和一些 JavaScript：
不过，我建议检查上述源代码，因为它们确实处理了一些您可能不会立即想到的“问题”，例如在单击锚链接时调整滚动位置。
使用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>