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

Question

I want my navbar to be transparent, but when the user scrolls a bit I want it to change to a solid color and I am using bootstrap for the navbar, I have done the code that is needed with javascript.

I had this javascript in my HTML file, but it doesn't seems to work and I don't really know why

    <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>

and I have also added the CSS code.

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

I don't know why it doesn't work, it is not displaying any errors, I have also manually put the class and it worked so the problem is from the js code and not the CSS.

Answer 1

Use scrollY property of Window object.

See the Snippet below:

 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> 

Answer 2

Try using window.scrollY instead of document.body.scrollTop .

if (window.scrollY >= 100)  

You can also use document.documentElement.scrollTop . It's the html element that actually scrolls, not the body. Typically document.body.scrollTop will always be 0.