Dynamic Scroll Based Classes

Last modified March 22, 2021
.* :☆゚

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.remove('scroll-top', 'scrolling-up', 'scrolling-down')
  } else if (end <= 1) {
    document.body.classList.remove('scroll-bottom', 'scrolling-up', 'scrolling-down')
  } else if (distance > 0 && start !== 0 && end !== height) {
    document.body.classList.remove('scrolling-up', 'scroll-top', 'scroll-bottom')
    start = null;
  } else if (distance < 0 && start !== 0 && end !== height) {
    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);
Jaclyn Tan

I'm Jaclyn and I make websites. I aim to make the web a more fun and accessible place, sharing what I learn along the way.

My blog has no ads or sponsors and I plan on keeping it that way. If you like what I do please consider supporting me.