Hide & Show Nav From Scroll Direction

Nav
Scroll
Utility
GSAP
ScrollTrigger
JS
CSS
Last Updated: Nov 21, 2025
  • body:not(:has(.w-nav-button.w--open)) Effect disabled when nav is opened by checking if the page has a w-nav-button element with a class of w--open
<style>
body:not(:has(.w-nav-button.w--open)) .nav-1_component.is-hidden { transform: translateY(-100%); }
</style>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
	gsap.registerPlugin(ScrollTrigger);

	document.querySelectorAll(".nav-1_component").forEach((component) => {
		if (component.hasAttribute("data-nav-1")) return;
		component.setAttribute("data-nav-1", "");

		let lastDirection;
		ScrollTrigger.create({
			trigger: document.body,
			start: "top top",
			end: "bottom bottom",
			onUpdate: (self) => {
				if (lastDirection === self.direction) return;
				lastDirection = self.direction;
				if (self.direction === 1) {
					component.classList.add("is-hidden");
				} else {
					component.classList.remove("is-hidden");
				}
			}
		});
	});
});
</script>