使导航（.navbar）更改向下滚动时的背景颜色不起作用

Question

我正在努力让导航类 .navbar 在向下滚动时更改背景颜色。我已经使用了这段代码和其他一些代码，无论我尝试实现什么，它都不起作用。我试图让导航在视图离开页面顶部后添加替代颜色类

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('.navbar');

    if (scrollPos > 10) {
      navbar.addClass('alt-color');
    } else {
      navbar.removeClass('alt-color');
    }
  });
});

.navbar {
    transition: 0.2s all linear;
    background-color: #212121;
    height: 100px;
    width: 100%;
}
.navbar.alt-color {
    background-color: #fff !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar">
</nav>

Answer 1

正如已经说过的，你不需要使用 jQuery。 JQuery 变得越来越过时，而普通 JS 可以轻松做到这一点。

只需将事件侦听器添加到窗口：

window.addEventListener

并检查

scroll

事件。

然后您可以根据条件使用

classList.toggle

添加课程。 Toggle 允许使用第二个参数作为条件。在这种情况下：

this.scrollY > 10

window.addEventListener('scroll', function() {
  const NAVBAR = document.querySelector('nav');
  NAVBAR.classList.toggle('alt-color', this.scrollY > 10);
})

.navbar {
    transition: 0.2s all linear;
    background-color: #212121;
    height: 100px;
    width: 100%;
}
.navbar.alt-color {
    background-color: blue;
}

/* added for demo purpose */
body {
  min-height: 800vh;
}

nav {
  position: sticky;
  top: 0;
}

<nav class="navbar"></nav>