Ho to make a navbar that fades in when the page is scrolled

Question

I made a navigation bar with a background that changes color from transparent to translucent black when the user scrolls down. My problem is I can't get it to change back to transparent when the user scrolls to the top of the page here what i have so far

HTML:

<nav id="mynav" style="transition: 1.4s ease-in" position:fixed;> <div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link" href="Courses.html">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="Log In">Videos</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Images</a>
  </li>    
</ul></nav>

JS:

    window.onscroll = navfade;
function navfade(){
    var nbar = document.getElementById("mynav");
    if(nbar.scrollTop < 5){
        nbar.style.background = "rgba(10,10,20,0.45)";
    }else {
        nbar.style.background = "transparent";
    }
}

your `mynav` div is in position fixed, so its `scrollTop` value will never change (i had 0 in my tests, but i can change with your CSS). Your code should work and turn back to transparent, but it doesn't because `nbar.scrollTop < 5` is always true — Kaddath, Mar 14 '18 at 16:11

score 2 · Accepted Answer · answered Mar 14 '18 at 16:17

In your navFade function value of nbar.scrollTop is always 0.

Check How to get and set the current web page scroll position?

I replaced nbar.scrollTop with document.documentElement.scrollTop

window.onscroll = navfade;
function navfade(){
    var nbar = document.getElementById("mynav");
   
    if(document.documentElement.scrollTop < 5){
        nbar.style.background = "rgba(10,10,20,0.45)";
    }else {
        nbar.style.background = "transparent";
    }
}

<nav id="mynav" style="transition: 1.4s ease-in" position:fixed;> <div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link" href="Courses.html">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="Log In">Videos</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Images</a>
  </li>    
</ul></nav>

<div>Fake Content</div>
<div>Fake Content</div>
<div>Fake Content</div>
<div>Fake Content</div>
<div>Fake Content</div>
<div>Fake Content</div>
<div>Fake Content</div>

Ho to make a navbar that fades in when the page is scrolled

1 Answers1