Scroll · Moves as you scroll
Direction-aware nav hide按滚动方向收纳导航
- yielding
- instantly back
- unobtrusive
As you read downward the top bar slides away and gives the screen back to the content. The moment you scroll up even slightly it returns — even from far down the page.
When to use it
Use it on long lists, long reads, and dense mobile pages. Do not hide it on short pages or when the bar holds a critical action such as checkout — people will lose it.
Parameters
deltaY > 15px → transform: translateY(-100%) · deltaY < -15px → transform: translateY(0) · 320ms ease-out
Recipe
Direction-aware nav hide → 320ms ease-outwhen deltaY > 15px → transform: translateY(-100%)when deltaY < -15px → transform: translateY(0)
One sentence for your AI
Add a direction-aware top bar: compare this frame's scroll position with the previous one, hide the bar with translateY(-100%) while scrolling down, and bring it straight back to translateY(0) when scrolling up. Keep a 15px tolerance so jitter does not toggle it, and use 320ms ease-out for the movement. Always show it at the very top of the page.