Dynamic Scroll Based Classes ✧ unicorntears.dev ✧

Oftentime it can be useful to know when a user is at the top or bottom of a page, or if they are scrolling up or down.

Here is a really handy snippet that dynamically calculates all of this for you and updates the body class as a user scrolls down the page. This allows you to manipulate the page depending on where the user is using CSS.

var start = window.pageYOffset;
window.addEventListener('scroll', function () {
  // Set the start position
  if (!start) {
    start = window.pageYOffset;
  }

  let end = window.pageYOffset;
  let distance = end - start;
  let docHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
  let height = docHeight - window.innerHeight;

  if (end >= height) {
    document.body.classList.add('scroll-bottom')
    document.body.classList.remove('scroll-top', 'scrolling-up', 'scrolling-down')
  } else if (end <= 1) {
    document.body.classList.add('scroll-top')
    document.body.classList.remove('scroll-bottom', 'scrolling-up', 'scrolling-down')
  } else if (distance > 0 && start !== 0 && end !== height) {
    document.body.classList.add('scrolling-down')
    document.body.classList.remove('scrolling-up', 'scroll-top', 'scroll-bottom')
    start = null;
  } else if (distance < 0 && start !== 0 && end !== height) {
    document.body.classList.add('scrolling-up')
    document.body.classList.remove('scrolling-down', 'scroll-top', 'scroll-bottom')
    start = null;
  }
});
//trigger window resize on page load - may not be necessary for your use case
window.scrollTo(window.scrollX, window.scrollY - 1);
window.scrollTo(window.scrollX, window.scrollY + 1);