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); }