Hide Header on Scroll for Squarespace

/* Slide the header out of view when the script adds .header-hidden */
#header {
  transition: transform 0.3s ease;
}

#header.header-hidden {
  transform: translateY(-100%);
}

<script>
(function () {
  var header = document.getElementById('header');
  if (!header) return;

  var lastY = window.scrollY;
  var ticking = false;

  function onScroll() {
    var y = window.scrollY;
    /* Ignore jitters smaller than 10px so the header does not flicker */
    if (Math.abs(y - lastY) > 10) {
      if (y > lastY && y > 120) {
        header.classList.add('header-hidden');    /* scrolling down */
      } else {
        header.classList.remove('header-hidden'); /* scrolling up */
      }
      lastY = y;
    }
    ticking = false;
  }

  window.addEventListener('scroll', function () {
    if (!ticking) {
      window.requestAnimationFrame(onScroll);
      ticking = true;
    }
  }, { passive: true });
})();
</script>