滚动后如何更改导航栏颜色？

Question

用户向下滚动后，我正在尝试将导航栏的颜色从透明更改为黑色。 但是，我的 javascript 似乎没有工作，因为没有任何反应。 我看过几个视频和类似的问题，但没有一个有效

HTML

<nav role='navigation' class="sticky-top bg-transparent">
      <img class="navbar-brand" src="../static/website_Images/logo.jpg" alt="Logo" style="height:90px;">
      <div id="menuToggle">
        <input type="checkbox" />
            <span></span>
            <span></span>
            <span></span>
          <ul id="menu">
            <a href="/"><li>Home</li></a>
            <a href="/image_submit"><li>Submit Image</li></a>
            <a href="/image_search"><li>Search Image</li></a>
            <a href="/login"><li>Login/Sign up</li></a>
          </ul>
      </div>
    </nav>

JS

<script >
    $(window).scroll(function(){
     $('nav').toggleClass('scrolled', $(this).scrollTop() > 100);
     });
    </script>

CSS

.bg-transparent{
  height: 90px;
  }

.bg-transparent.scrolled{
  background: black !important;
}

Answer 1

您的 JavaScript 代码不正确。
使用此代码进行测试：

  window.onscroll = function () { scrollHeaderHandler() };

  function scrollHeaderHandler() {
    if (window.pageYOffset > 100) {
      $('nav').addClass('scrolled');
    } else {
      $('nav').removeClass('scrolled');
    }
  }