CSS position:sticky Not Working? Try This Fix

Anytime you are having an issue with CSS position:sticky, the solution is usually one of the following:

position: sticky Is Not Compatible with Your Browser

Before you begin troubleshooting, confirm that position: sticky is compatible with your target browser. Check here.

Sticky Element's Placement Property Is Not Set

In order for the sticky element to function correctly, it needs to have at least one of it's top, right, left, or bottom placement properties set.

.sticky-element {
  position: sticky;
  top: 0;
}

Sticky Element Has Parent(s) with overflow Property

If the sticky element has a parent or ancestor with overflow: hidden, overflow: auto, or overflow: scroll, then position: sticky will not work properly.

How to Find Parents/Ancestors with overflow

Here's an awesome JavaScript snippet I found to quickly find parents or ancestors with a set overflow property. Just copy and paste into your browser's console (source).

let parent = document.querySelector('.sticky-element').parentElement;

while (parent) {
    const hasOverflow = getComputedStyle(parent).overflow;
    if (hasOverflow !== 'visible') {
        console.log(hasOverflow, parent);
    }
    parent = parent.parentElement;
}

Parent Element's Height Property Is Not Set

The sticky element will not have a place to stick if the parent's height property is not set.