Feature box scroll

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!

Below is my read only link.


Here is my site Read-Only: Webflow - Chuqlab Project

Hey Mark!

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)

I hope that helps!

Tyler

1 Like

Thank you so much!! ill see what I can do with this information!

Hi Tyler, right now I have the information in a grid and inside a container- the position sticky isn’t working for me- is that because im in a grid?

Hi @MarkFisk52,

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.

I hope that helps!

Tyler