Question

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

向下滚动时，一旦gmail的菜单（存档，垃圾邮件，删除等）到达屏幕顶部，它就会停留在那里。
向上滚动时，菜单会返回原始位置。

另一个示例是此页面的侧栏：sample 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/

Answer 2

更好的方法是使用jquery航点。请查看此sticky-elements example

此外，这里是航点插件的getting started部分。

正如您在向下滚动时看到的那样，菜单会粘在顶部屏幕上。

希望这有用。

Answer 3

你可以试试这个：

<script>
var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){
        menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
        $(window).scroll(function () { 
            offset = menuYloc+$(document).scrollTop()+"px";
            $(name).animate({top:offset},{duration:1000,queue:false});
        });
});
</script>

浮动DIV的一些CSS称为floatMenu：

#floatMenu { position:relative; width:100%px; top:0px; left:0px; }

浮动的DIV：

<div id="floatMenu">Your content</div>

它与你给我们的例子没有相同的效果。这个是动画的，并在屏幕上追你......

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

3 个答案: