Hide & Show Nav From Scroll Direction
Nav
Scroll
Utility
GSAP
ScrollTrigger
JS
CSS
Preview Links
Custom JS
Enable custom code in preview or view on published site.
Enable custom code?
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>