The feature deck that would not stick
The new BinderDex landing page has a stacked-sticky feature deck: six full-viewport slides that pin as you scroll, each one riding up over the last. It is the pattern outlier.bet uses, and it is gorgeous when it works.
Except it did not. The slides pinned in the browser devtools viewport but never engaged in a real browsing session. The whole deck just scrolled past like a static page. No errors, no warnings, sticky just silently did nothing.
The culprit was one line of CSS on the <main> wrapper:
/* this creates a scroll container */
overflow-x: hidden;Here is what trips people up: overflow-x: hidden does not just clip horizontal overflow. It turns the element into a scroll container. And position: sticky sticks relative to its nearest scroll-container ancestor. When <main> becomes a scroll container, sticky elements inside stick to <main>, not to the viewport. Since <main> scrolls with the page, nothing visibly pins.
The old animation used GSAP transforms, which work inside any container. The new sticky-based deck hit this trap because sticky depends on the scroll container hierarchy.
The fix is one property swap:
/* clips overflow, creates no scroll container */
overflow-x: clip;overflow-x: clip clips decorative overflow identically but does not establish a scroll container. Sticky works again. One property change, and the entire six-slide deck came alive.
If you are ever debugging sticky that will not stick, check every ancestor for overflow: hidden. That is almost always the answer. Took me longer than I would like to admit.