CSS: Debugging Position:Sticky Not Working

In this tutorial you are going to learn how to troubleshoot position:sticky elements that just won't stick as they are expected to.

Why isn't position:sticky working?

The first step is to understand the issue. 99% of the time, position:sticky isn't working because an ancestor element is set to overflow: something other than 'visible'.

Getting technical

If any parent element of a sticky element has its overflow property set to auto, scroll, or hidden, it establishes a new scrolling context.

In this context, the sticky element's sticky behaviour is restricted to the bounds of this parent element, the one with the scrolling context.

This is true even if that parent element with overflow:hidden (or the likes) does not have any scrolling at all! It's still a new scrolling context, and the position:sticky element will now rely on it rather than the viewport* to try and 'stick'.

*Technically, the root element's own scrolling context. position:sticky is always relative to some scrolling context. The closest one, when going back up the DOM tree.

How to fix position:sticky not working?

To troubleshoot this, simply go into your page where you have a problem, and copy paste this code in the Devtools console (F12). Then press 'Enter'.

// Step 1: Get ALL elements on the page
let allElements = document.querySelectorAll("*");

// Step 2: Find elements with position:sticky
let stickyElements = [];
for (let element of allElements) {
let computedStyle = getComputedStyle(element);
if (computedStyle.position === "sticky") {
stickyElements.push(element);
}
}

// Step 3: Check parent elements for overflow styles
for (let stickyElement of stickyElements) {
let parent = stickyElement.parentElement;
while (parent) {
let parentComputedStyle = getComputedStyle(parent);
if (parentComputedStyle.overflow !== "visible") {
console.log(
"This ancestor of a position:sticky element has overflow set to something other than visible, so it might cause problems."
);
console.log(parent);
}
parent = parent.parentElement;
}
}

The code automatically looks for all elements on the page with position:sticky, and then goes up through their ancestors to see if any has overflow set to something other than visible.

That will return you a message like this:

Pointing you to the exact element(s) that have overflow set to something other than visible.

The actual fix

Now, to fix the issue, simply adjust your CSS so that these elements have the default overflow value of overflow:visible, instead of something like overflow-x:hidden;

Often, the culprit is CSS that looks like this:

body {
overflow-x:hidden;
}

You will want to delete that CSS for position:sticky to work on your page.

You can either delete the CSS you will find, or if you can't delete it (ie if it comes from a theme or plugin) you will need to override it:

html body {
overflox-x: visible;
}

And you will need to find another way to fix your horizontal scrolling issues, see that tutorial for help with that.

Conclusion

I hope you found this helpful!

Cheers!