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!
Hello Roee!
I would like to congratulate you for all your work, this post save me a hard time solving the issue within my project.
Thanks a lot, the script really came handy.
Thanks Fran! Glad to hear you found it useful 🙂