Question

我在标题中有一个导航栏，一旦向下滚动100px，它就会捕捉到屏幕顶部。功能很好，但我希望导航栏保持固定在右边直到快照，所以基本上，导航栏需要保持固定位置，直到你滚动超过100px ..

请访问http://www.justletmeusethisnameplz.co.nf/index%20stacky.html查看我的网站。

由于

以下是相关的HTML

<div class="header"> <!-- BEGINNING OF HEADER -->

    <div id="logo"> <!-- BEGINNING OF LOGO -->

    <h1 class="sliding-middle-out">Hi</h1>

    </div> <!-- END OF LOGO -->

    <div id="navigation">  <!-- BEGINNING OF NAVIGATION -->

    <div style="float:right"> <!-- BEGINNING OF IDK -->

    <div id="slider"></div>
    <a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a>
    <a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
    <a href="content.html"><div id="three" class="item"><div class="inside">Content</div></div></a>
    <a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>

    </div> <!-- END OF IDK -->

    </div> <!-- END OF NAVIGATION -->

    </div> <!-- END OF HEADER -->

这是相关的CSS

.header{
        height:100px;
        width:960px; 
        float:left;
        background-color:white;
      }
      #navigation{
        height:40px;
        font-size:20px;
        color:black;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        float:right;
        background-color:white;
        padding-top:5px;
        position:relative;
      }
      #navigation.stick{
        height:40px;
        font-size:20px;
        color:black;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        float:left;
        background-color:white;
        padding-top:5px;
        position:fixed;
      }
      .logo{
        height:100px;
        width:425px; 
        float:left;
      }

这是相关的JavaScript / JQuery

<script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="./jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="./jquery-latest.js"></script>

    <script>
$(document).on("scroll", function(){
    if($(document).scrollTop() > 1){
    $('#navigation').addClass("stick");
    }else{
    $('#navigation').removeClass("stick");
    }
});
</script>

Answer 1

我假设你在页面上向下滚动100px后会喜欢使用stick类，在这种情况下你需要更改javascript：

$(document).on("scroll", function(){
    $('#navigation').toggleClass('stick', $(document).scrollTop() > 100);
});

Answer 2

将xlcall32.dll添加到标题类。

希望这有帮助！

Answer 3

要保持导航栏的位置，您需要修改#navigation：

#navigation {
    ...
    position: fixed;
    right: 0;
}

然后以这种方式更改javascript：

$(document).on("scroll", function(){
    if($(document).scrollTop() >= $("#logo").height()-$("#navigation").height()){       
        $('#navigation').addClass("stick");
    }else{
        $('#navigation').removeClass("stick");
    }
});

该条件还会阻止导航栏从标题中渗出，或者您可以保留当前代码（如果您愿意）。

如何让div保持固定直到jquery actiavtes

3 个答案: