Hide on Scroll Header
Scroll down — the header disappears. Scroll back up — it reappears. Implemented with position: fixed, transform: translateY(-100%)and body padding compensation.
Scroll down — the header disappears. Scroll back up — it reappears. Implemented with position: fixed, transform: translateY(-100%)and body padding compensation.
The header uses position: fixed instead of sticky so it can be removed from the document flow. JavaScript measures the header height on load and sets document.body.style.paddingTop accordingly to prevent layout shifts.
Scroll direction is detected using requestAnimationFrame. An 80px threshold prevents accidental hiding on small scroll movements near the top of the page.
Best for pages where content should take centre stage and the header can temporarily yield space. Ideal for long articles, documentation pages, or portfolio pages.
The header returns immediately when scrolling back up, so navigation is always accessible.
position: fixed — not stickytransition: transform 0.3s ease for smooth animationResizeObserver — adjusts dynamicallypassive: true for performancedocument.querySelectordata-testid="header-hide-on-scroll" for E2E tests