Hi, I’m trying to put together an agency portfolio, and I wanted to replicate this interaction.
Specifically the section titled “Countdown to Zero”.
As you can see, it locks into place until the entire webpage design image is scrolled through before going into the next section. I found a thread talking about using overflow: scroll, but it doesn’t really work in this case.
Any suggestions?
Here is my public share link: LINK
(how to access public share link)
This can be done using a div element set to Position: Sticky.
Basically you take the div with the content that you want to stay on the screen and you set it to sticky.
You specify when you want it to stick by putting a pixel amount in the box below the drop down.
(Look at the red box around the 20)
In this example I set it to stick to the screen when that div reaches 20 pixels from the top.
This div will stop sticking to your screen once you finish scrolling through the parent element (the section the user is scrolling through).
Thanks for the help!
However, I tried what you said but it doesn’t seem to be working though.
This is the section I’m trying to make it work on… I can’t seem to figure it out.
https://2717-design-b35a7e.webflow.io/case-studies/cis-global
