Material sticky header
A proof of concept of Android's scroll-snap settings header behaviour in React and TypeScript.
At a glance
- TypeScript, React
Tags
A proof of concept implementation of Android's scroll-snap settings header: a sticky header that transitions between states with the scroll position, mimicking the native Android settings screen.
How it works
The large title of the screen collapses into a compact header as you scroll, then expands again, and snaps to one state or the other when you let go. It is built in React and TypeScript with:
- scroll listeners that read the position,
- transforms animated with Motion for the transitions,
- a custom hook that observes the height of elements, so dynamic content does not break the layout,
- state management for the header's visibility transitions.
The component is documented and tested in Storybook, with the settings screen of a phone as its demo story.
