How can I use sticky positioning in a container with hidden overflow?

Question

I'm having a problem with position: sticky. This is my html distribution:

HTML distribution

.A {overflow:hidden;}
.C {height: 500px;}
.D {height: 100px; position: sticky;}

I found in blogs that position: sticky doesn't work when the direct parent of the element has the overflow: hidden property. But, in this case, there is more than one level between class "A" and "D" elements. I also try to force the overflow: visible property to the class "C" element, but sticky still not working in "D".

Answer 1

Actually you can't, Position : sticky doesn't work with a parent which got overflow set.

If you really need this, you should use Javascript with a on scroll event toggling position

Answer 2

Unfortunately using the position: sticky property with a parent element that is overflow: hidden will not work.

If you must have a parent element be overflow: hidden then you will most likely have to use JavaScript with some scrolling/viewport visible functions or preferably IntersectionObserver API.

If you have some flexibility and can move some of the HTML around, there may be a solution where you can put the element you want with position: sticky outside of that overflow: hidden element and have it be in the same place.

EDIT: I remember providing a similar answer about using position: sticky and wanted to share the fiddle that I helped someone with. All the pre-existing markup is in the HTML section and the updates I suggested to get it working are in the CSS section.