Question

我希望在页面的某个中心有一个固定的导航栏和一个其他固定的导航栏。当滚动到达第二个导航时，应首先隐藏（或变为相对）＆amp; 第二个应该成为固定栏。当我们向上移动时，第二个导航器现在变为相对（不隐藏），而第一个导航器将再次开始显示。

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

一个页面上有两个导航固定导航栏

1 个答案: