Comparison
Scroll containervsSticky positioning
Scroll container
the page scrolls, but your scroll listener on `window` never fires because the scrolling happens inside a div.
Any element whose `overflow` is scroll or auto, which creates its own scrolling region with its own scroll position and scroll events. Introducing one breaks anything that assumed the document scrolls: sticky elements, scroll listeners, IntersectionObserver defaults and scroll restoration all bind to the wrong thing. Nested scroll containers are worse still, because scroll chaining decides which one moves and users rarely agree with the answer.
Full entry →Sticky positioning
the heading scrolls with the page until it reaches the top, then stays there until its section ends.
A hybrid that behaves as relative until a scroll threshold is crossed and as fixed after it, bounded by the nearest scrolling ancestor. It needs an offset — a `top` value with no unit at all does nothing — and it silently fails if any ancestor has `overflow: hidden` or `auto`, which is the reason nine out of ten sticky bugs happen. It sticks within its parent, so a short parent ends the effect early.
Full entry →