Question

我正在尝试将其中一个类似于顶部的stackoverflow橙色消息，如果向下滚动页面，消息将被固定到顶部“并且当您向后滚动以使其在视图中时它恢复修复并返回显示为块。

无论如何这是我的尝试：

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

最近有很多问题......

查看我的答案here和here。由于您使用的是jQuery，它非常方便 - 处理window的{{1}}事件，获取元素scroll，克隆它，并添加或删除相应的类。

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

1 个答案: