Auto-hide Navigation¶
The top navigation bar gets out of the way while you read: it slides up and hides as you scroll down the page, then reappears the moment you scroll up. This reclaims vertical space — especially valuable on small screens — without removing access to the menu.
Overview¶
- Hide on scroll down — the navbar translates off-screen once you scroll past a small threshold, so long-form content gets the full viewport.
- Show on scroll up — any upward scroll brings the navbar straight back.
- Smooth CSS transitions — the show/hide uses a CSS transform, not a layout change, so it stays smooth and doesn't reflow the page.
- Mobile-optimised — the behaviour is most useful on touch devices where screen real estate is scarce.
How it works¶
The behaviour is a small, dependency-free controller in assets/js/auto-hide-nav.js. It listens to scroll events passively, compares the current scroll position to the previous one, and toggles a CSS class on the navbar that drives the transform. Because the listener is passive and the visual change is a transform, scrolling stays jank-free.
Implementation¶
| File | Role |
|---|---|
assets/js/auto-hide-nav.js |
Scroll-direction controller that toggles the navbar's hidden state. |
_includes/navigation/navbar.html |
The navbar markup the controller targets. |