一頁上有兩個導航固定導航欄

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/