Overview

Auto-hiding sticky navigation with Framer Motion

Watch tutorial

With CSS position sticky, making a sticky navigation has become super easy. But what if you want to hide the navigation when the user scrolls down and show it when the user scrolls up? This is a common pattern that is actually a little bit harder to achieve.

In this recipe we’re using Framer Motion’s useScroll hook to get the current scroll position, and toggle the state of the navigation based on the scroll direction.

Watch the tutorial linked at the top of this recipe if you want to see how it’s done step by step.