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.
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.
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 |