如何使用jQuery將div“粘貼”到頁面頂部？

Question

我正在嘗試使其中之一類似於頂部的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');
    }
});

});

如您所見，它發生了閃爍。 我該如何預防？

還有編寫我的代碼的更優化的方法嗎？

Answer 1

最近對此有很多疑問...

在這里和這里查看我的答案。 由於您使用的是jQuery，因此非常方便-處理window的scroll事件，獲取元素的offset ，對其進行克隆，然后添加或刪除適當的類。