Sticky sidebar

A sticky sidebar has three lives in one scroll. It starts in the flow, moving with everything else. Once its top edge would pass the offset it was given, it stops and holds, while the article beside it keeps going. Then, when its container runs out, it is let go and scrolls away like anything else. That last part is what separates it from a fixed panel, and it is the reason position: sticky was worth adding to CSS: a fixed element never leaves, so it eventually collides with the footer, and the workarounds involved measuring scroll position in JavaScript on every frame.

The mechanics are unforgiving in a specific way. Sticky positioning is relative to the nearest scrolling ancestor, and it is bounded by its own parent’s box. If the parent is exactly as tall as the sidebar, there is nowhere to travel and nothing sticks, which is the single most common bug: the column looks right, the CSS looks right, and the effect never fires because the wrapper shrank to fit. It also needs an inset to stick to, so a rule with no top value does nothing at all. And any ancestor with overflow: hidden or overflow: auto between the sticky element and the scroller quietly becomes the scroll container, which usually means the sticky element is stuck inside a box it can never move within.

Height is the other constraint, and it is a design decision rather than a bug. A sidebar taller than the viewport can only ever show its top, because the part below the fold is pinned out of reach. Either keep the sticky card short enough to fit, which is why sticky rails tend to hold a table of contents, a filter summary, or a price box rather than a full navigation tree, or give the sticky element its own scroller with a bounded max-height. The version that reads worst is the one that looks fine on a laptop and hides half its links on a short window.

It is worth asking what the column is for before pinning it. A table of contents that tracks the reader’s position, usually paired with scroll spy, earns its place because it answers a question that comes up mid-article. A promotional card that follows someone for four thousand words does not, and it costs the reading column width on every screen. The same reasoning applies to a sticky header: the test is whether the content is needed continuously, not whether it is important.