Tailwind toggle sticky header on scroll

toggle-sticky-header-tailwind.js

// Need this to work out which direction the scroll is happening
let lastScroll = 0;

// Store header component
const header = document.querySelector("header");
// Element looks like this: <header class="transition-transform duration-300 fixed w-full">

// On page scroll
window.addEventListener("scroll", () => {
  // Store current page scroll pixels from top
  const currentScroll = window.pageYOffset;

  // If we're at the top, or scrolling upwards, show the header
  if (currentScroll === 0 || lastScroll > currentScroll) {
    header.classList.remove("-translate-y-full");

  // Else hide it
  } else {
    header.classList.add("-translate-y-full");
  }

  // Store the scroll position to ccompare on next scroll
  lastScroll = currentScroll;
});