Sticky Scroll Features — Free HTML CSS JS Snippet

The sticky scroll feature section is the two-column layout on nearly every modern SaaS landing page: feature copy scrolls up the left column while a media panel on the right stays pinned in place, swapping its content each time a new step reaches the middle of the viewport. This snippet builds it with plain HTML, CSS position: sticky, and an IntersectionObserver — no animation library required.

position: sticky does the pinning, not JavaScript

The right column's .ssf-frame is position: sticky; top: 0; height: 100vh. Because its parent .ssf-media grid track is as tall as all four steps combined, the frame rides along fixed on screen for the entire section and releases naturally at both ends. That's the whole pinning mechanism — no scroll listeners, no transform math, and no layout jump when the section starts or ends, which is the classic bug in JS-pinned versions.

A middle-band IntersectionObserver picks the active step

Each text step is observed with rootMargin: '-45% 0px -45% 0px', which shrinks the observer's viewport to a thin 10%-tall band across the middle of the screen. A step only "intersects" while it occupies that band, so exactly one step is active at a time and the swap happens when a step's content is centered — where the reader is actually looking — rather than when its edge touches the viewport top.

Panels crossfade by class, animated purely in CSS

All four media panels are absolutely stacked inside the sticky frame. activate(i) toggles a single is-active class; CSS transitions handle the rest — inactive panels sit at opacity: 0; transform: scale(.9) translateY(26px), and the active one eases up to full size with a cubic-bezier(.22,1,.36,1) overshoot curve. Keeping the animation in CSS means the observer callback does no style math and the crossfade runs compositor-only.

Steps dim instead of disappearing

Inactive text steps stay visible at opacity: .28, so the reader always sees the sequence context — what came before, what's next — while the active step reads at full contrast. The dots under the media panel mirror the same index, stretching the active dot into a pill for a subtle progress affordance.

Each step is 88vh tall on purpose

Step height controls pacing: at ~88vh, each feature owns almost a full screen of scrolling, long enough to read the copy before the next swap fires. Shorten min-height for a snappier section or lengthen it for slower storytelling — the observer logic is height-agnostic.

Mobile collapses to a single column

Below 760px the media column is hidden and steps stack at full opacity, because a sticky side panel has no room on narrow screens. If you want media on mobile, an inline image per step beats a sticky frame there.

How the middle band actually computes

Negative rootMargin percentages shrink the observation rectangle relative to the viewport itself: -45% from the top and -45% from the bottom leaves a band spanning from 45% to 55% of the screen height. With threshold: 0, a step intersects the moment any pixel of it enters that band — so tall steps activate as soon as their leading edge reaches the center, and because two 88vh steps can't both occupy a 10%-tall band, the "exactly one active" guarantee falls out of the geometry rather than any bookkeeping code. That's also why no debouncing is needed on fast scrolls: the browser coalesces crossings into ordered callbacks.

Customizing it

Swap the gradient placeholder panels for screenshots, videos, or live components; add steps by duplicating a text block and a panel (the dots generate automatically). Pair it with a scroll pin steps section for a GSAP-pinned variant, a scroll reveal grid below, or a scroll spy nav for page-level navigation.