javascript - 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 和类名之间没有空格。这是因为您在 nav 上应用类，通过使用空格表示 .onscroll 是 nav 的子元素。

所以你的 CSS 应该是

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