Scroll Stack is a hand you've already held.
Every section on this page is a card. Hold one, then watch the next one press flat over it.
You've scrolled through one of these and never known its name.
A pricing page. A feature tour. A portfolio that "snaps" between projects. It pinned. It held. The next thing covered it completely. That's the whole trick — and it has a name.
One CSS primitive, shipped three times, four years apart.
No single inventor. Four separate hands.
WebKit / Firefox / Chromium engineers
Shipped `position: sticky` across three engines independently, four years apart, without ever agreeing on timing — which is why this took until 2017 to be safe everywhere.
Codrops’ editorial team
Turned a CSS trick into a named effect category twice, nearly a decade apart, each time pushing the same flat-card premise further.
Corey Ginnivan
An independent developer whose personal site is repeatedly cited as the real-world proof the effect works outside a CodePen demo.
GreenSock · Jack Doyle
ScrollTrigger’s `pin` option industrialized the JS-driven version, putting the mechanic on Apple-adjacent production sites at scale.
Press it yourself.
Four cards, four moves. Press to advance the deck; release to pull the top card back off.
Hold a section in the viewport for a fixed scroll distance — position: sticky, or a ScrollTrigger pin, does this for free.
Click to press the next card →The incoming section starts at the bottom edge, fully opaque, and begins sliding up over the pinned one.
It keeps pressing upward until it fully occludes the section beneath — a hard drop-shadow marks the exact seam.
The moment the new card locks into place, the old one is let go and drops back into normal scroll flow underneath.