It looks like my sticky subnav is no longer working in my shop, and I can’t figure out why. It’s set to sticky, with a top margin, but no matter what I set it at, it continues to scroll with the page.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Have you turned any of the parent elements overflow:hiddenor any toher value of overflowthat isn’t the default?
Ok, no I get it. The element you gave sticky to is as tall as its parent. It means the sticky works, but just never really happens… for it to happen, the element you give the sticky to must be shorter than the parent, as the parent becomes de-facto a sticky-container. The stickiness will end when this parent pushes the sticky element upwards. As your sticky element is as tall as the parent, it’s pushed upwards as soon as you scroll.
Either set your flexbox childs to not grow all the height, or give the sticky property on the dyn-list directly (the child of the current sticky element).
Ahhh, thanks so much! that makes more sense now looking at it in hindsight.
Remember the no-overflow-set-on-parents rule because it’s sometimes hard to respect, depending on layouts and IX used. Sticky behavior is something you have to think about early in the design process 