如何使用 jQuery 使 div “粘”到页面顶部？答案

【问题标题】：How to make a div "stick" to the top of the page using jQuery?如何使用 jQuery 使 div “粘”到页面顶部？
【发布时间】：2011-11-27 06:32:55
【问题描述】：

我正在尝试制作类似于顶部的 stackoverflow 橙色消息的其中一项，如果您向下滚动页面，则消息将固定到顶部”，并且当您向上滚动以使其可见时它恢复被修复并返回显示为块。

无论如何，这是我的尝试：

http://jsfiddle.net/cXP2y/

HTML：

<div style="border:1px solid red;height:50px;width:100%">Header</div>
<div id="message">Message</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

CSS：

#message { padding: 10px; background: #06c; }
.message-fixed { position: fixed; top: 0; width: 100%; }

jQuery:

$(function() {

var message = $('#message');
$(window).scroll(function() {
    if($(window).scrollTop() > (message.offset().top + message.height())) {
        message.addClass('message-fixed');
    }
    else {
        message.removeClass('message-fixed');
    }
});

});

如您所见，它发生了闪烁。我怎样才能防止这种情况发生？

还有更优化的方式来编写我的代码吗？

【问题讨论】：

坦率地说我不明白......为什么不只是坚持CSS位置：固定（没有JS。）？无论如何，它的位置在那里，在顶部，对吧？
@roXon 我使用的是固定位置，但是当用户向上滚动到顶部时，如果没有 js，它不会恢复返回以显示为块。这是很多网站使用的某种效果，包括 stackoverflow 和 okcupid。这就是我想要的。
你在 Stack Overflow 的什么地方看到它？
@minitech 当你得到一个新徽章时，也许它也在其他地方。
哦，那个。它始终保持在顶部，不是吗？它永远不会恢复display: block。但我想我明白你的意思，请阅读我的回答。

标签： javascript jquery

【解决方案1】：

最近有很多关于这个的问题......

查看我的回答 here 和 here。由于您使用的是 jQuery，因此非常方便 - 处理 window 的 scroll 事件，获取元素的 offset，克隆它，然后添加或删除相应的类。

【讨论】：

第二个链接有答案。以防其他人有同样的问题。
您应该将此问题标记为与那些问题重复并将其关闭，而不是在您的答案中引用其他 SO 帖子。
@Keith.Abramo：首先，我在等待确保它们实际上是重复的。这个问题并不完全清楚。