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:

.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".

I think you'll find that you're more likely to be understood if you don't try to speak in code. :) — isherwood, May 09 '22 at 16:11
Please provide a [minimal-reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) you can use the code-snippet-tool to add an executable version of your code. — F. Müller, May 09 '22 at 16:12
Does this answer your question? [Why does \`overflow:hidden\` prevent \`position:sticky\` from working?](https://stackoverflow.com/questions/43909940/why-does-overflowhidden-prevent-positionsticky-from-working) — F. Müller, May 09 '22 at 16:39

score 0 · Answer 1 · answered May 09 '22 at 16:33

0

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

answered May 09 '22 at 16:33

Mbenga

19
3

score 0 · Answer 2 · answered May 09 '22 at 16:42

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.

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

2 Answers2