addClass不更新CSS

Question

我的添加类没有更新？ 我正在尝试制作粘性导航，并且我的网站没有更新CSS。 现有的问题似乎都没有帮助。 该网站是antetech.org

HTML：

<nav id = 'main-nav'>
         <a href="/index.php"><img class = 'logo' src='CSS/IMG/logo.png' alt='Logo'></a>

                <ul>
                   <li><a href='#home'> <button class="bttn-stretch bttn-md bttn-primary" >Home</button> </a> </li>
                   <li><a href='#about'><button class="bttn-stretch bttn-md bttn-primary"> About </button></a></li>
                   <li><a href='#downloads'> <button class="bttn-stretch bttn-md bttn-primary">Software</button> </a> </li>
                   <li><a href='/support.php'><button class="bttn-stretch bttn-md bttn-primary"> Tech Support </button></a></li>
                </ul>
        </nav>    

CSS：

nav .onscroll{
background: rgba(173, 9, 26, 0.5);
}

jQuery / JavaScript：

<script type="text/javascript">
     $(window).on('scroll', function(){
         if($(window).scrollTop()){
             $('nav').addClass('onscroll');
             $('nav').removeClass('default');
         }
         else 
             {
              $('nav').removeClass('onscroll');
              $('nav').addClass('default');
             }
     })
    </script>

在chrome上，它显示类正在更新，但没有任何变化。 不仅具有背景色，而且具有任何更改。

Answer 1

您的Javascript正常运行，并且按预期，这是CSS错误。

您需要将style.css中的选择器nav .onscroll更新为nav.onscroll即nav和类名之间没有空格。 这是因为您要在导航上应用该类，因此使用空格表示.onscroll是导航的子元素。

所以你的CSS应该是

nav.onscroll{
    background: rgba(173, 9, 26, 0.5);
}

Answer 2

如下更改CSS声明（删除导航）：

.onscroll{ background: rgba(173, 9, 26, 0.5); }