Inertial smooth scrolling works by transforming the content element rather than letting the browser scroll it. That transform makes the element a containing block, and inside a containing block both position: fixed and position: sticky quietly stop meaning what you think.
The consequence is structural, so it has to be decided while scaffolding. Retrofitting it means rewriting every two-column section on the site.
What has to move
- Fixed headers and overlays render outside the smoother's wrapper
- Every sticky column becomes a scroll-triggered pin on an inner wrapper, never on a grid cell
- Anchor links go through the smoother's own scrollTo, because scrollIntoView fights it
- Scroll locking pairs the overflow class with pausing the smoother, or the page keeps sliding behind your open menu
The pin that looks wired and never fires
A pin whose scope is shorter than the viewport can never engage: the end condition is met before the start one. Nothing reports it. The build passes, the linter is happy, and the spacer element is in the DOM either way, so even a screenshot looks plausible. Measure the scope height before believing a pin.
And never leave a position: sticky on an element you are also pinning. Sticky applies its own offset first, the pin holds relative to that, and the column lands at exactly twice the offset you asked for.
