Auto-hiding Sticky Navigation With Framer Motion
CSS sticky makes sticky headers super easy. But what if you want to make an auto-hiding header?
🧑💻 🎥
... Almost ready!
... Almost ready!
Using CSS position: sticky makes sticky headers super easy. One thing that isn’t as easy is making a sticky header that hides when the user scrolls down and shows when the user scrolls up. This is a common pattern that is actually a little bit harder to achieve.
In this video, we’ll use Framer Motion to create an auto-hiding sticky navigation. We’ll use the useMotionValueEvent hook to listen to the scroll position and update the visibility of the navigation based on the scroll direction.