Question

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

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

感谢

Answer 1

使用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>

的Javascript

$( 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/

如果您对此有任何疑问，请随时询问。

当它滚出屏幕时更改元素位置

1 个答案: