Hide-on-scroll header

Full motion specification

How the movement works

Use it when screen space is tight, as on phones, to give the content more room while keeping the menu one small scroll away.

1. 01A 511 × 168 viewport with a 34 px header fixed at the top. Scroll: 0→170 px over 0.3–1.1 s (down), 170→100 over 1.5–1.9 s (up), 100→230 over 2.4–2.9 s (down), 230→0 over 3.3–4.3 s (up), each with cubic ease-in-out. One pass takes 4.7 s (twice per 9.4 s pack cycle).
2. 02If the last movement was downward the header hides; if upward it shows. Within 34 px of the top of the page it always shows.
3. 03Hiding and showing both move it 36 px upward over 0.3 s (quadratic ease-in-out), like transform: translateY with a transition.
4. 04While scrolled, a 12 px shadow sits under the header (opacity 0→0.14 over the first 30 px of scroll). The scrollbar thumb follows the scroll.