【问题标题】:How do I make a "sticky menu" go back to it original class as I scroll back up?当我向上滚动时,如何使“粘性菜单”回到原来的类?
【发布时间】:2012-09-12 15:28:43
【问题描述】:

我对 javascript 还很陌生,我正在尝试在我的网站上制作第二个粘性菜单。当您向下滚动时,我有第二个导航更改其类,这似乎工作正常。但是,一旦您向上滚动,我希望它回到原来的类。有什么帮助吗?代码如下。

<script type="text/javascript">        
$(window).scroll(function () { 
        if (window.scrollY > 200)
        {
      $("#top-bar").removeClass("nav-main").addClass("navbar-inner").addClass("navbar-fixed-top"); 
    }

    });
</script>

谢谢。

【问题讨论】:

    标签: javascript header scroll nav sticky


    【解决方案1】:

    也许类似于 else 来恢复原始类。

    <script type="text/javascript">        
    $(window).scroll(function () { 
            if (window.scrollY > 200) {
               $("#top-bar").removeClass("nav-main").addClass("navbar-inner").addClass("navbar-fixed-top"); 
            } else {
               $("#top-bar").addClass("nav-main").removeClass("navbar-inner").removeClass("navbar-fixed-top"); 
            }
    
        });
    </script>
    

    【讨论】:

    • 它确实恢复了原始类,但是它保留了其他类的某些部分,例如背景颜色等。我检查了代码,当我向上滚动新添加的类时,原来的类进入class="" 标记在一起。 @easement
    • 我在 ("") 标记内留了一个空格,它现在已修复并且可以正常工作!谢谢! @easement
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-03-31
    • 2017-03-14
    • 1970-01-01
    • 2012-12-03
    • 1970-01-01
    相关资源
    最近更新 更多