Hi there, I have feature boxes on my home page which I am trying to achieve a scroll effect with- I want the boxes to scroll down while the other objects next to them stay in place…I know it is achievable with webflow because the designer before me did it to achieve the effect that is currently on chuqlab.com with these boxes( the four blue boxes with txt and red checkmarks in them that are a bit further down on the page)…could someone tell me how to achieve the same thing? The help would be greatly appreciated!
My understanding is that you want the Key Benefits (with paragraph and picture) to stick to the top of the viewport while the user continues to scroll past the boxes with the points.
To achieve this, you will want to apply position sticky to a div block which contains the elements that you want to be held in place while the user scrolls.
First, put the elements into a div block Second, set that div block’s position to sticky Third, change the top value from auto to 60px. You can fine-tune that number but in your case it was what was needed so that the div block wasn’t cut off by your nav bar.
Here is a link to a Webflow Univerisity video tutorial to learn more (article in the description)
Ya, exactly. The site has changed since I last saw it but, if I remember correctly, the grid took up the entire height of the container that it’s within so there was no room for it to move.
Put the elements you want to move inside a div block and set that div to sticky (as mentioned in more detail above) and that will allow the div block to move within the grid.
