两个导航定位固定导航条在一页

Question

我想要两个固定的导航栏，一个在顶部，另一个在页面的中心。当滚动到第二个导航线时，首先要隐藏(或者是相对的)，第二个应该是固定条。当我们向上移动时，第二个导航器现在变得相对(而不是隐藏)和拳头，一个将再次开始显示。

小提琴

<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();
        }
    });
});

看这把小提琴http://jsfiddle.net/P8Hzx/1/