Disappearing Nav

Disappearing navbars are found all over the web. This feature may seem like an advanced technique, but it’s actually really easy to implement. With just a little bit of JavaScript, you can have a disappearing navbar.

The logic

When the user scrolls down, the navbar fades out. When the user scrolls up, the navbar fades in. Easy, right? We need to take into account the page position when the user starts to scroll. This helps determine if the direction of the scroll is up or down. So, when the user starts to scroll, we need to save the pageYOffset, or, the distance from the top the page is scrolled. Then, we need to figure out if the user has scrolled up or down. To figure that out, we check if the current position is greater than the last saved position. If the current position is greater, that means that the user has scrolled down. If the position is less, the user has scrolled up. Let’s code this out:

var lastPosition = 0;
window.addEventListener('scroll',(e) => {
  var position = window.pageYOffset;

  if (position > lastPosition) {
    //the user has scrolled down
  } else {
    //the user has scrolled up
  }
})

That’s the bulk of our code. Now, we just need to hide and show the header. There are a few different ways to do this. I’m using CSS classes, hidden and active, with different opacities. Here is that code:

.hidden {
  transition: opacity .4s ease;
  opacity: 0;
  pointer-events: none;
}
.active {
  transition: opacity .4s ease;
  opacity: 1;
}

This adds a little bit of a transition and makes whatever is in the header non-interactive while it’s hidden. Putting it all together is simple: when the user scrolls down, the header’s class should be hidden, and when the user scrolls up, the header’s class should be active. Here’s the code:

var lastPosition = 0;
window.addEventListener('scroll', () => {
  var position = window.pageYOffset;
  var header = document.querySelector('#header');
  if (position > lastPosition) {
    //the user has scrolled down
    header.classList.add('hidden');
    header.classList.remove('active');
  } else {
    //the user has scrolled up
    header.classList.add('active');
    header.classList.remove('hidden');
  }
})

Of course, this snippet only works with navbars that are fixed to some side of the screen. I think this effect looks great on mobile and really frees up a lot of screen real estate. Here’s your demo:

See the Pen Disappearing Navbar by Nate Northway (@the_Northway) on CodePen.

Edit:

I posted this on Reddit and got a good reply from /u/alejalapeno:

All iterations of this need a debounce/threshold put on them because a 1px scroll-up on a trackpad should not re-summon the menu. It needs a threshold like 10-20 pixels scrolled-up at least.

I added that in as a condition to the if statement in the JS. It checks if the difference between lastPosition and position is greater than 20px before showing the navbar. I’ve already updated all the sample code above and on in the CodePen demos, but here’s a closer look at it:

if (position > lastPosition) {
  header.classList.add('hidden');
  header.classList.remove('active');
} else if (lastPosition - position > 20) {
  header.classList.add('active');
  header.classList.remove('hidden');
}