StickySection
Pin content to the screen and calculate scroll progress natively.
Usage
The component provides a render prop with a progress float between 0 and 1 as you scroll through the track.
tsx
import { StickySection } from "starkit-ui";
<StickySection trackHeight="200vh">
{(progress) => (
<div style={{ opacity: progress }}>
Scroll to reveal!
</div>
)}
</StickySection>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| trackHeight | string | '300vh' | How tall the scrollable area is (controls duration of stickiness). |
| children | (progress: number) => ReactNode | - | Render prop to consume the 0-1 progress value. |