20 / Scroll behaviour

Direction State

Going down puts the bar away so you can read. Going back up brings it straight back.

also called auto-hide header · direction-aware nav · scroll-up reveal

Position says where you are; direction says what you want. Descending reads as “reading, leave me alone”, ascending as “looking for something”. A few pixels of dead zone are mandatory, or a trackpad makes it flicker.

How it is built

dir = y > last ? "down" : "up"; [data-dir="down"] .bar { transform: translateY(-100%) }