滚动后如何更改导航栏的颜色答案

【问题标题】：how to change the color of the navbar after scrolling滚动后如何更改导航栏的颜色
【发布时间】：2019-07-23 02:29:02
【问题描述】：

我希望我的导航栏是透明的，但是当用户滚动一点时，我希望它变成纯色，并且我使用引导程序作为导航栏，我已经完成了 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。

【问题讨论】：

标签： javascript html css scroll bootstrap-4

【解决方案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>

【讨论】：

谢谢你，但我已经完成了导航栏和所有我只需要 js 但会检查它的东西
只关注 js 部分。我创建了示例 html 和 css，因为您没有在原始问题中添加您的 ..

【解决方案2】：

尝试使用window.scrollY 而不是document.body.scrollTop。

if (window.scrollY >= 100)

您也可以使用document.documentElement.scrollTop。实际滚动的是 html 元素，而不是正文。通常document.body.scrollTop 将始终为 0。

【讨论】：