📖 Step 3: Design - UI Components & Patterns#76 / 291
Sticky
Sticky
📖One-line summary
An element that stays pinned on screen while you scroll.
✨Example
A sticky element that stays fixed while scrolling
Sticky header
Content item 1
Content item 2
Content item 3
Content item 4
Content item 5
Content item 6
Content item 7
Content item 8
Content item 9
Content item 10
Content item 11
Content item 12
⚡Vibe coding prompt examples
>_
Pin the table header as sticky. Keep the header visible while scrolling, and add a shadow underneath when stuck.
>_
Pin the sidebar as sticky. Keep the sidebar in place while scrolling main content; if the sidebar is taller than the viewport, allow internal scrolling.
>_
Pin the buy button area as sticky on the product detail page. Pin to the bottom on mobile and to the right on desktop.
Try these prompts in your AI coding assistant!