Description
Relevant spec: https://github.com/w3c/csswg-drafts/blob/main/css-position-3/Overview.bs#L625
WICG conversation: https://discourse.wicg.io/t/scrollable-sticky-element/5669
When an element is made sticky (position: sticky;) it is pinned to its nearest scroll containing ancestor. However, if the sticky content is taller than the viewport of the scroll container, its excess content (what doesn’t fit within the viewport) is not visible until the end of the scroll container is reached.
A feature that I’ve had to implement a few times now is similar to a sticky element except that in the case described above, the sticky element scrolls with the container until the opposite edge is reached (the bottom when scrolling down) and is dragged along until the end of the scroll container is reached or the scroll direction is changed. If the scroll direction changes, the sticky element stays in place (as if it were absolutely positioned in the place where the scroll direction changed) until an edge is reached.
This pattern is sometimes used for document outline navigation kept to the side of a long document.
It would be great if this behavior was implemented in CSS rather than relying on JavaScript. Every JS implementation relies on listening to scroll events which causes problems. If the scroll handler fires too often, it can slow down the page significantly. If the scroll handler is debounced, the sticky element could appear to lag behind the scrollable content and may overshoot the edge of the scroll container and have to jump back into place once the handler fires.