Hi, Iv’e been having trouble making the heading “The Premier Clothing Hub” stick when I scroll. I have aligned the section to the top and set a random distance to test it and still nothing. Would love advice on what I’m missing here. Thanks.
Hidden overflow and sticky elements don’t mesh too well, so parents of any position: sticky element need to be set to overflow: visible for them to work.
It’s a weird quirk, but if you’re needing elements on the page to have hidden overflow then just make sure they are limited to that specific element’s parent instead of a blanket overflow: hidden on the body itself. Webflow released a video that touches on the subject a few weeks ago that may be useful:
The second change involves which element you actually apply the position: sticky on:
Sticky elements require a “track” of sorts to slide within so they know when to stop sticking and since the heading wrapper (heading block) is actually within another wrapper of its own (Section 6), it doesn’t actually have enough space inside its parent to “stick” for any amount of time.
Moving the position: sticky style to the next parent element up has this working as you’d expect: