滚动时让Div"抓住"页面顶部

Question

我在网页fixed 20px顶部有一个标题.

但是,我想在滚动时抓住页面的顶部,并在用户向下滚动20px后固定到屏幕顶部.

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');
});

关于jsFiddle的示例