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".
CodePudding user response:
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
CodePudding user response:
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.