javascript - 滚动到屏幕外时更改元素位置

我的网站中有2个菜单，其中包含：menu1 menu2内容页脚。

当我向上滚动时，我希望menu2保留，但将位于顶部（而不是menu1）
所以滚动后：menu2内容页脚

谢谢

最佳答案

刚刚使用jquery做了一个小的jsfiddle。应该很容易理解。

的HTML

<div id="menu1">
    Menu 1
</div>
<div id="menu2">
    Menu 2
</div>
<div id="content">
    Content
</div>
<div id="footer">
    Footer
</div>

Java脚本

$( window ).scroll(function() {
    if($(window).scrollTop() >= $("#menu1").height() && $("#menu2").css("position") != "fixed"){
        $("#menu2").css("position", "fixed");
        $("#menu2").css("top", "0");
        $("#content").css("margin-top", $("#menu2").height() + "px");
    }
    else if($(window).scrollTop() < $("#menu1").height()  && $("#menu2").css("position") == "fixed")
    {
        $("#menu2").css("position", "");
        $("#menu2").css("top", "");
        $("#content").css("margin-top", "");
    }
});

http://jsfiddle.net/oaa1e6y2/3/

随时问您对此有任何疑问。