Hide On Scroll Navbar

About this pattern

The pattern is reclaiming vertical space on scroll without losing the nav entirely: hide it on the way down, bring it back the instant the user scrolls up, which is usually a sign they're hunting for something rather than just reading. Reach for it over a plain sticky navbar on long-form or content-dense pages where the header is competing for screen space; reach for a simpler shrink-on-scroll or fade-to-translucent treatment instead if hiding it outright would make navigation feel unreliable, like inside a checkout flow. Direction comes from diffing the current scrollY against a value held in a ref rather than state, inside a Framer Motion useMotionValueEvent listener — a ref avoids triggering a render on every scroll tick, and useScroll already batches internally to animation frames, so no extra throttling is needed on top. A 4px delta threshold absorbs jitter from trackpads and momentum scrolling so the bar doesn't flicker open and shut on tiny movements, and hidden only flips true past y > 40, so scrolling down from the very top never immediately hides it. One real gap between the two files: the shipped code tracks window scroll, exactly what a page header needs, while the preview scopes useScroll to its own container since it's a demo inside a scrollable card — don't carry that container-scoped version into a real header.