A visual on one side stays in place while features scroll past on the other. The screenshot swaps to match the active feature.
An element stays fixed on the screen while the user scrolls, but ONLY within its parent section. Once the user scrolls past that section, the element releases and scrolls away normally. This is called "pinning". It's perfect for feature explanations where you want to show one product screenshot on the left while the user scrolls through a list of features on the right.
The simplest implementation uses CSS position: sticky; top: 0, which keeps the element at the top of the viewport as long as its parent is in view. A common layout has two columns: left column with position: sticky (the persistent visual) and right column that scrolls normally (the feature list). As the user scrolls through features on the right, the visual on the left stays put and can change to reflect each feature.
Scroll inside the box. Phone on the left stays pinned; its content swaps based on the active feature block.
April was your best month.
Calendar-first planning — drag, drop, and re-order. Capacity-aware so you don't over-promise.
A focused list of what matters today. Done items disappear quietly. No graveyard of to-dos.
End-of-month summaries you'd actually read. No notifications, no dashboards in your face.
Draft your responses. Hold them. Send them when you're ready — not when the notification arrives.
Design a SaaS feature explanation section with a sticky scroll layout. Left column (40% width): a phone mockup or browser window screenshot with position:sticky top:80px that stays in view. Right column (60% width): 4 feature blocks stacked vertically, each 400px tall, with icon, heading, and 2-line description. As the user scrolls through each feature block on the right, use IntersectionObserver to detect which block is most visible and update the left screenshot to show the corresponding product UI screen with a smooth crossfade transition.