javascript - 滚动后如何更改导航栏的颜色

Question

我希望我的导航栏是透明的，但是当用户滚动一点时我希望它变成纯色并且我正在为导航栏使用 bootstrap，我已经用 javascript 完成了所需的代码。

我的 HTML 文件中有这个 javascript，但它似乎不起作用，我也不知道为什么

    <script>
      var myNav = document.getElementById("mynav");

      window.onscroll = function() {
          use strict";
          if (document.body.scrollTop >= 100) {
              myNav.classList.add("scroll");
          } else {
              myNav.classList.remove("scroll");
          }
      };
    </script>

我还添加了 CSS 代码。

.scroll {
   background-color: transparent !important;
   transition: all 0.5s ease-in;
}

我不知道为什么它不起作用，它没有显示任何错误，我还手动放置了类并且它起作用了，所以问题出在 js 代码而不是 CSS。

Answer 1

使用 Window 对象的 scrollY 属性。

请参阅下面的代码段:

var myNav = document.getElementById("mynav");

window.onscroll = function() {
    if (window.scrollY >= 100) {
        myNav.classList.add("scroll");
    } else {
        myNav.classList.remove("scroll");
    }
};

.scroll {
   background-color: transparent !important;
   transition: all 0.5s ease-in;
}

.main-container{
  height: 1000px;
}

#mynav{
  position: fixed;
  background-color: gray;
  height: 50px;
  margin:0 auto;
  top: 0;
  bottom:0;
  line-height: 50px;
  padding:5px;
  width: 100%;
}

<div class="main-container">
  <div class="mynav" id="mynav">
  Hello World! this is mynav
  </div>
</div>