Sticky
Keeps a header or a list heading in view while its container scrolls: CSS sticky on web, a pinned ScrollArea header on iOS and Android.Sticky header
Preview
Code
Quarterly report
Section 1. Scroll: the header stays at the top while the report moves under it.Section 2. Scroll: the header stays at the top while the report moves under it.Section 3. Scroll: the header stays at the top while the report moves under it.Section 4. Scroll: the header stays at the top while the report moves under it.Section 5. Scroll: the header stays at the top while the report moves under it.Section 6. Scroll: the header stays at the top while the report moves under it.Section 7. Scroll: the header stays at the top while the report moves under it.Section 8. Scroll: the header stays at the top while the report moves under it.
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { ScrollArea, Sticky, VStack } from '@advui/core'
<Sticky offset="0"><Header /></Sticky>
// Pinned on iOS and Android too: a direct child of the ScrollArea's content
<ScrollArea height={400}>
<VStack>
<Sticky><Text>Kachin</Text></Sticky>
…
</VStack>
</ScrollArea>Examples
List section headers
Each region heading stays at the top until the next one pushes it away.Preview
Code
Kachin
Bhamo
Myitkyina
Putao
Waingmaw
Rakhine
Kyaukpyu
Maungdaw
Mrauk-U
Sittwe
Shan
Kengtung
Lashio
Muse
Taunggyi
API reference
Sticky
A View that takes View style props; give it a background so content scrolls under it.| Prop | Type | Default | Description |
|---|---|---|---|
edge | 'top' | 'bottom' | 'top' | The edge it sticks to. `bottom` works on web only. |
offset | SpaceTokens | number | 0 | Distance from that edge, such as the height of a header above it.Web only. |
zIndex | ZIndexTokens | number | 'sticky' | Stacking level: above content, below dropdowns and dialogs. |
Accessibility
- Sticky changes only where something is drawn: reading and focus order follow the source.
- Leave room for focused elements:
scroll-padding-topon the scrolling container (web) stops a focused field from hiding under a top Sticky.
Platform notes
Web
position: sticky with top (or bottom) set to offset. It sticks within its nearest scrolling ancestor (the page or a ScrollArea) and only while its parent is in view, so put it high in the tree, not in a short wrapper.iOS
React Native has no sticky positioning. A top Sticky that is a direct child of a ScrollArea’s content element (fragments count as opened) is pinned with
stickyHeaderIndices: the ScrollArea makes that element’s children its own and moves the element’s style props (padding, gap…) to the scroll content; its other props, such as testID, are not kept. Anywhere else it is a plain View; edge="bottom" and offset are web only.Android
As on iOS: pinned with
stickyHeaderIndices when it is a direct child of a ScrollArea’s content element, a plain View elsewhere.