A sidebar with position: sticky and top: 0 follows the scroll for a while, then slides off the top of the screen. Why?

## Two boundaries, not one People usually learn the first boundary — a sticky element sticks inside its nearest scrolling ancestor — and stop there. The second boundary is what produces this symptom: a sticky box may never be shifted outside its containing block. For an in-flow element, that containing block is the box established by its parent. The sticky offset is allowed to grow only until the box reaches the containing block's far edge; after that the constraint is dropped in favour of staying inside the parent, and the element travels with the page again. That is not a bug or a browser quirk. It is what makes region-scoped sticky headers work: each section header leads its own section and hands off to the next one precisely because it cannot escape its section. ## The travel distance The useful mental model is a simple subtraction: ``` travel = containing block height - sticky element height - insets/margins in the way ``` If the parent is 2000px tall and the sidebar is 400px, the sidebar can hold `top: 0` for 1600px of scrolling and then leaves. If the parent is 400px tall and the sidebar is 400px, the travel is zero — the element is pinned and released at the same instant, which looks exactly like sticky not working. This is why the symptom "it stops sticking" and the symptom "it never sticks" have the same root cause at different magnitudes. ## Why the parent is so often exactly the child's height The usual culprit is a wrapper element added for styling that shrink-wraps around the sticky child, so parent height equals child height and travel is zero. The other frequent cause is the opposite-looking one: the sticky element is itself a flex or grid item and gets stretched. In a row-direction flex container or a grid row, items stretch to fill the cross axis by default, so the sidebar becomes exactly as tall as its containing block — again, zero travel. The element is stretched, not the parent shrunk, but the subtraction comes out the same. ```css .layout { display: grid; grid-template-columns: 240px 1fr; } .layout > aside { align-self: start; /* stop the stretch so the box is shorter than its track */ position: sticky; top: 0; } ``` With `align-self: start` the aside sizes to its content, the track is as tall as the long article next to it, and the difference is the distance the sidebar can follow. ## Diagnosing it in one pass Because the cause is geometric, the diagnosis is geometric too. Select the sticky element and its parent and compare heights. If they match, you have found it. If the parent is taller, measure the difference and compare it against how far the element actually followed before it left — they will agree, which confirms the containing block is the limit rather than something more exotic like an ancestor scroll container. A second check worth doing: confirm the parent you are measuring is really the containing block. Wrapper divs inserted by a component library sit between the element and the tall column more often than you would guess, and it is always the nearest one that constrains. ## Working with the constraint rather than against it Once you accept that a sticky element lives inside its parent, the design choices become clear. If you want the sidebar to follow for the whole page, its parent must span the whole page — put the sticky element directly inside the full-height column and let the column's height be driven by the sibling content. If you want per-section behaviour, keep tight parents deliberately: `position: sticky; top: 0` on a heading inside each `section` gives you the standard "current section header" effect, where each heading pins and is pushed out by the next one. The push-out is the same constraint doing exactly what you want. If you want the sidebar to stop short of the very bottom — for a footer, say — reduce the containing block rather than trying to override sticky. Shortening the parent, or adding bottom padding inside it, moves the release point up, because the release point is just the containing block's far edge. One more consequence worth knowing: the travel budget also depends on the element's own height, so a sidebar taller than the scrollport can appear not to stick at all even with generous parent height, because there is nothing left to scroll before the constraint releases.