Scrollable pane
Component notes
Sticky vs. Fixed Positioning
/ position: sticky · position: fixed /
also called sticky header, fixed header, pinned element
A sticky element participates in normal layout until scrolling reaches its inset, then stays pinned within its containing scroll area. A fixed element is removed from normal flow and anchored to the viewport or a transformed containing block from the start. Sticky is usually right for table and section headers; fixed is typical for persistent viewport controls.
If you called it…
…you meant a sticky vs. fixed positioning.
Anatomy — every part, named
- 1Sticky threshold
top“The point where the header stops scrolling and sticks” is the sticky threshold.
- 2Sticky scroll container
position: sticky“The panel the sticky header is trapped inside” is its scroll container.
Prompt — paste into your agent
Use position: sticky with top: 0 for the section header so it scrolls normally until it reaches the top of its nearest scrolling container, then remains there. Reserve position: fixed for UI that must stay anchored to the viewport independently of every scroll container.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my sticky/fixed positioning. Rule out: sticky doing nothing because an ancestor has overflow hidden/auto/scroll — that is the classic; sticky missing a top/bottom offset so it never engages; fixed behaving like absolute inside a transformed/filtered ancestor; the content jumping when an element switches to fixed because no placeholder reserves its height. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| CSS | position: sticky | |
| CSS | position: fixed | |
| CSS | top |