javascript - 如何让 div 保持固定状态直到 jquery 激活

Question

我在标题内有一个导航栏，当您向下滚动超过 100 像素时，它会捕捉到屏幕顶部。功能很好，但我希望导航栏在捕捉之前保持固定在右侧，所以本质上，导航栏需要保持在固定位置，直到您滚动超过 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

我假设您希望在页面向下滚动 100 像素后应用 stick 类，在这种情况下您需要更改 javascript:

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