jQuery:如何将DIV保持在屏幕顶部并在向上滚动(并到达其原始位置)后恢复其位置

Question

我想要一个div元素来做类似于gmail的事情.

• 当向下滚动,一旦Gmail的菜单(归档,垃圾邮件,删除...等)到达屏幕的顶部,它在那里停留.

• 向上滚动时,菜单返回到原始位置.

另一个示例是此页面的侧栏:示例2

如何使用简单(易于理解)的jQuery代码实现这一目标？(兼容所有浏览器)

<div id="header">Menu goes here =)</div>

Answer 1

我讨厌插入我的博客,但我在帖子中解决了这个确切的问题.http://www.dittocode.com/how-to-emulate-gmails-floating-menu-bar-with-jquery/

具体到您的问题,试试这个:

CSS:

#header.floating {
    position: fixed;
    top: 0;
}

JavaScript的:

$(document).ready( function() {

    $(window).scroll( function() {
        if ($(window).scrollTop() > $('#header-wrapper').offset().top)
            $('#header').addClass('floating');
        else
            $('#header').removeClass('floating');
    } );

} );

jsFiddle:http://jsfiddle.net/omarjuvera/0p9p43Lz/