Show/Hide Element on Scroll w/ Vanilla JS

#javascript

Here's a quick script in Vanilla JavaScript that will add/remove a class based on if you're scrolling up or down on a page. In the past, I've used a widget called Headroom.js but I wanted to see if I could replicate the basics from scratch.

Here is the result:
Custom Headroom Demo (view source)

Take a look at the index.html source code.

The main script that runs is this block here:

let scrollPos = 0;
const nav = document.querySelector('.site-nav');

function checkPosition() {
  let windowY = window.scrollY;
  if (windowY < scrollPos) {
    // Scrolling UP
    nav.classList.add('is-visible');
    nav.classList.remove('is-hidden');
  } else {
    // Scrolling DOWN
    nav.classList.add('is-hidden');
    nav.classList.remove('is-visible');
  }
  scrollPos = windowY;
}

window.addEventListener('scroll', checkPosition);

We add a scroll event listener to the window and fire off the checkPosition function every time the user scrolls on the page.

Looking at function checkPosition(){} we first get the window.scrollY position, which is how far in pixels we are from the top of the page. We then compare it to the scrollPos variable which will get updated to the new window.scrollY position after each scroll.

If windowY is less than the previous scrollPos then we know that we are scrolling up and we can add a class to our nav element accordingly. In this case, we want our menu to show when scrolling up and hide when scrolling down.

That's basically it, but we'll want to add some sort of throttle so that we don't fire off events like crazy during long scroll sessions. For this we add a debounce function which will make sure it waits 10ms before firing.

We can replace our window event listener like this:

function debounce(func, wait = 10, immediate = true) {
  let timeout;
  return function() {
    let context = this, args = arguments;
    let later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    let callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

window.addEventListener('scroll', debounce(checkPosition));