dragoon0x Scroll Behavior
Sticky Elements
| Element | When to Stick |
|---|---|
| Header/nav | Long pages where nav access matters |
| Table header | Long tables where column context matters |
| Sidebar | When content scrolls but tools should stay visible |
| CTA button | When the primary action needs to be always reachable |
| Tab bar | When tabs scroll away from their content |
Scroll-Triggered Animations
- Fade-in on scroll: elements appear as they enter viewport
- Parallax: background moves slower than foreground (use sparingly)
- Progress bar: shows reading progress for articles
- Reveal on scroll: elements build in as user scrolls
Rules
- Scrolljacking (overriding native scroll behavior) is almost always wrong
- Parallax: maximum one layer, subtle, and respect prefers-reduced-motion
- Sticky elements steal screen space, budget carefully on mobile
- Scroll-triggered animations should only fire once (not re-trigger on scroll up)
- Back-to-top button: show after scrolling 2+ viewport heights
- Scroll position should persist on navigation (back button returns to scroll position)