A step-by-step guide to building a sticky, stretchy scroll view header in SwiftUI, similar to the Spotify album screen. Covers combining scroll offset tracking (via preference keys and coordinate namespaces) with a stretchable header (GeometryReader) to create a ScrollViewWithStickyHeader component. Explains how to calculate a headerVisibleRatio, overlay a second header when the original scrolls past the navigation bar, make the navbar transparent using toolbarBackground, and add bonus pull-down tilt (rotation3DEffect) and parallax (vertical offset) effects. The final component is available in the open-source ScrollKit library.

13m read timeFrom danielsaidi.com
Post cover image
Table of contents
ExampleHow to implement scroll offset trackingHow to implement a stretchable scroll view headerHow to make the scroll view header stickyFinal codeHow to implement the pull down tilt effectHow to implement the parallax effectConclusion