SKILL.md
Sticky and Fixed Elements
position: fixed vs position: sticky
| Property | Behaviour | Use for |
|---|---|---|
position: fixed |
Removed from document flow. Always stays at the same viewport position regardless of scroll or parent. | Global navigation header, bottom toolbar, floating action button |
position: sticky |
Stays in document flow until it hits its scroll threshold, then locks in place. Returns to flow when parent scrolls past. | Table column headers, section headings in a long list, in-page toolbars within a scroll container |
Prefer sticky over fixed when the element belongs to a specific section or scroll context. Fixed elements sit above everything and affect the entire viewport — use them only for truly global UI.
Top — Navigation Header
The global navigation header is the most common fixed element. It should:
- Remain visible at all times so the user can always navigate away
- Be as thin as possible to maximise content area — 48–64px is a common range
- Have a background and shadow so content scrolling beneath it does not bleed through
- On scroll, a subtle shadow (
--shadow-sm) signals that content is behind it