Resource
Hide-on-scroll header (no library)
JavaScript
A 40-line vanilla JS module that hides the header on scroll-down and reveals on scroll-up. Respects prefers-reduced-motion. No dependencies.
What’s in it
A self-contained ES module that toggles a CSS class on the header element based on scroll direction. CSS handles the transform animation. Honours prefers-reduced-motion by setting the transition to 0s. ~40 lines, no dependencies.
How to use it
Import as a module. The CSS for the show/hide states is included; customise the transform values for your design. Performance impact: nil (single passive scroll listener throttled via requestAnimationFrame).
License
MIT.