javascript - 一页上有两个导航固定导航栏

Question

我想要两个固定的导航栏，一个在顶部，另一个在页面的某个中心。当滚动到达第二个导航时，首先应该隐藏(或成为相对的)&第二应该成为固定吧。当我们向上移动时，第二个导航现在变得相对(不是隐藏)并且第一个导航将再次开始显示。

fiddle

<div id="nav01">
</div>
<div class="content"></div>
<div id="nav02">
</div>
<div class="content"></div>


#nav01
{
    height: 100px;
    background: red;
    width: 100%;
    position: fixed;
    top: 0;
}
#nav02
{
    height: 100px;
    background: blue;
    width: 100%;
}
.content
{
    height: 2000px;
    background: #ccc;
    width: 100%;
}

我见过很多 jquery 插件，但没有发现它们有用 - 我不擅长编写脚本，所以需要你的帮助，在此先感谢。

Answer 1

你必须添加下面的代码

$(document).ready(function(){
    $(window).scroll(function() {
        if($(window).scrollTop()>2000){
            $("#nav02").css("position", "fixed");
            $("#nav02").css("top", 0);
            $("#nav01").hide();
        } else {
            $("#nav02").css("position", "relative");
            $("#nav01").show();
        }
    });
});

请参阅此 fiddle http://jsfiddle.net/P8Hzx/1/