position: sticky not Working? Try This

If you are experiencing issues with the position:sticky feature in CSS, meaning it’s not working for you, then the reason is usually one of the following:

1. The feature is not supported by your browser

Before proceeding, make sure that the position:sticky feature is supported by your browser. You can check browser support for the feature here.

2. No Placement Defined

For elements defined as sticky to work properly, they must include one of the following placement properties: top, bottom, right, left.

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

3. One of the parent elements of the sticky element has the overflow property

If there is a parent element of the sticky element that contains the property overflow:hidden, overflow:auto, or overflow:scroll, then the position:sticky feature will not work properly.

Here’s a JavaScript snippet that quickly detects if such an overflow property exists for the parent of the element you defined as sticky (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;
}

4. The parent element does not have a defined height

The sticky element won’t have a place to “stick” to if the height property is not defined for the parent element.

So far, I hope you found the post helpful. Good luck!