position: sticky — The Most Useful CSS You're Not Using

Sticky elements scroll normally until they hit an edge, then pin. Navbars, sidebars, table headers — one property, no JavaScript.

Basic usage

.navbar {
  position: sticky;
  top: 0;            /* REQUIRED — the pin distance */
  z-index: 100;
}
.sidebar { position: sticky; top: 80px; }   /* below a sticky navbar */
th { position: sticky; top: 0; }            /* table headers! */

Why sticky "doesn't work" — the 4 causes

• No offset: you must set top (or bottom/left/right)
• Overflow parent: any ancestor with overflow: hidden/auto/scroll breaks sticky — the #1 cause. Find it: walk up in DevTools checking computed overflow
• Parent height: sticky only moves within its parent; a parent exactly as tall as the element gives it nowhere to stick
• Flex stretch: in a flex row, add align-self: flex-start so the item doesn't stretch full height

The sidebar on our course pages is position: sticky — inspect it and see.