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

change element position when it scrolled out of screen

本文关键字：元素 位置 屏幕 滚动      更新时间：2023-09-26

我的网页中有两个菜单，其中包含：menu1 menu2 content footer。

当我向上滚动时，我希望菜单2保持不变，但会在顶部（而不是菜单1）所以滚动后：菜单2内容页脚

感谢

刚刚用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/

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

相关文章：