javascript - 滚动时使 Div "catch"位于页面顶部

Question

我在网站上有一个 header ，它距离页面顶部固定 20px。

但是，我希望它在滚动时捕获页面顶部，并在用户向下滚动 20 像素后固定在屏幕顶部。

CSS

#header{
    padding: 0px 0px 0px 0px;
    background: url(../images/header-fill2.jpg) repeat-x top;
    position: fixed;
    height: 60px;
    width: 100%;
    top: 20px;
    z-index: 5000;
}

我认为需要某种形式的 JavaScript，但几乎没有 JavaScript 经验，因此非常感谢任何帮助。

Answer 1

只需监听 scroll 事件并读取 $(window).scrollTop() 的值并据此设置 top .
像这样的东西:

$(window).on('scroll', function() {
    $('#header').css('top', $(window).scrollTop() > 20 ? '0px' : '20px');
});

Example on jsFiddle