Show and hide nav on scroll

<script is:inline data-astro-rerun>
  (() => {
    const nav = document.querySelector(".Header");
    if (!nav) return;

    let lastScrollY = window.scrollY;
    let ticking = false;

    function onScroll() {
      const currentScrollY = window.scrollY;

      if (currentScrollY > lastScrollY) {
          nav.classList.add("hide");
      } else {
          nav.classList.remove("hide");
      }

      lastScrollY = currentScrollY;
      ticking = false;
    }

    const scrollHandler = () => {
      if (!ticking) {
          window.requestAnimationFrame(onScroll);
          ticking = true;
      }
    };

    window.addEventListener("scroll", scrollHandler);

    // 💡 Clean up on navigation
    document.addEventListener("astro:before-swap", () => {
        window.removeEventListener("scroll", scrollHandler);
    });
  })();
</script>

CSS

nav {
  transition: transform 0.3s ease;
}
nav.hide {
  transform: translateY(-100%);
}