position: sticky Not Working? 8 Causes and How to Fix Each

1. You forgot the threshold offset

This is the number one cause. Sticky needs at least one of top, right, bottom or left to know where to pin. Without it the declaration is valid but never engages.

.sidebar {
  position: sticky;
  top: 0; /* without an offset, sticky never engages */
}

2. A parent has overflow hidden, auto or scroll

If any ancestor between the sticky element and the page has overflow set to hidden, auto or scroll, it becomes the scroll container and the element sticks to that box instead, usually invisibly. The classic culprit is overflow-x: hidden on a page wrapper, added to hide a horizontal scrollbar. Paste this into the DevTools console to find every offending ancestor.

let el = document.querySelector(".sticky");
while ((el = el.parentElement)) {
  const { overflowX, overflowY } = getComputedStyle(el);
  const ok = (v) => v === "visible" || v === "clip";
  if (!ok(overflowX) || !ok(overflowY)) console.log(el, overflowX, overflowY);
}

3. The parent is too short

Sticky is constrained to its direct parent. If the parent is only as tall as the sticky element, there is no room to travel, so it looks like it isn't sticking at all. If it sticks for a while and then scrolls away halfway down the page, that is the parent ending.

4. It's a grid or flex item that stretches

Grid and flex items stretch to fill the row by default (align-items: stretch). A sticky sidebar inside display: flex or display: grid is therefore already as tall as its container and has nowhere to move.

.layout { display: flex; gap: 2rem; }

.sidebar {
  position: sticky;
  top: 80px;
  align-self: flex-start; /* stop the stretch so it can travel */
}

5. It is sticking, but something covers it

Sometimes sticky works and you just can't see it: later elements with position, transform or opacity paint on top, or the sticky element has a transparent background so content shows through.

6. The offset fights another element

A sticky element with top: 0 under a fixed header will stick behind that header. Two sticky elements with the same offset replace each other instead of stacking.

7. Tables: sticky on the wrong element

For sticky table headers, put position: sticky on the th cells (thead th) rather than the table. With border-collapse: collapse, borders on sticky cells don't travel with them, so the header looks broken even though it sticks.

• CSS position: sticky, with header, sidebar and table examples

8. Old Safari or a width-specific bug

Every current browser supports position: sticky unprefixed. Safari versions before 13 needed position: -webkit-sticky. More often the bug is width-specific: a media query adds overflow, changes the layout to flex, or the header is taller than a landscape phone screen.

Catch sticky bugs at every breakpoint in one scroll

Sticky bugs hide at specific widths, so checking one viewport at a time is how they reach production. Sizzy shows your localhost on phones, tablets and desktops side by side with scrolling synced: scroll once and you see every sticky header and sidebar engage and release on every device, then inspect any one of them with Chromium DevTools.

• See Sizzy pricing and plans
• Get Sizzy