Sticky Position Bug

Hey guys,

There is an issue with the sticky position I find in the services section. It seemed to work find on the original template we purchased because there were only 4 sticky elements inside the div. But we increased it to 7. So the last one (the seventh) should logically over the first six elements when the section is over.

However as it reaches the 4th element they are kind of stuck with each other and 4th element doesn’t remain underneath but starts moving as well, please see the screenshot to have an idea where to focus when you scroll it.

I can’t understand why it’s moving too.

Thank you for your help.


hi Michael, what you saw was the result of me trying to play with the buttons and see if smth helps.

I was following this pattern initially and the 7th block was set to 300 and sticky position accordingly, but it didn’t work out, if you tried to recreate this issue you would have seen it, that it’s still not working properly.

Ah, it’s probably best to setup the demo of the problem so that people see it as you’re experiencing it. Part of the problem is that no one else can republish your site through readonly to see the CSS result.

My guess is that the entire sticky layout here is a little suspect. You might go back to the original template and see if it’s possible you’ve changed anything essential.

Even with only 3 items, the same problem occurs as the parent container begins scrolling off-screen.

it is not necessary to re-publish the website to see the issue, because it’s visible in the designer window is well. i didn’t change anything essential there, i was just copying the last block each time and increasing the sticky position by 50, and actually for me if I leave only 4 blocks the problem doesn’t occur.

Correct but we can’t use chrome devtools there to help debug the sticky issue, and can’t see the aggregate CSS styles applied.

It happens that I’ve debugged a lot of sticky issues lately :laughing:

Remember, sticky has zero to do with Webflow, it’s a CSS feature, so it’s important to approach the debugging at that level.

oh I see, but can u see the CSS result on the published website itself? https://psf-workshop.webflow.io/
through the Inspect element?