Streaming live at 10am (PST)

Make Element Sticky Within A Div Block

Okay, so on this page I want the grid “WhatWeDoGrid” to be sticky within the WhatWeDo div block which has a height of 3000px, doing this for a scroll effect animation. But whenver I set it to sticky and set the top sticky position to 0 it doesn’t work what am I doing wrong?

https://preview.webflow.com/preview/vectorfox?utm_medium=preview_link&utm_source=designer&utm_content=vectorfox&preview=f83cef86d150841d278c92d81ac0fcbd&mode=preview


Here is my public share link: LINK
(how to access public share link)

HI @TD3Marketing - can you explain better what exactly is not working…?

I want the Gird “WhatWeDoGrid” to be sticky within the WhatWeDoDiv which has a height of 3000 pixels, When i set the grid position to sticky and set the top sticky option to 0px it doesn’t move, it says relative to MainBody which is my body element on the page, is it possible to change which element it’s relative to?

@IVG Sorry Forgot To Tag You

if I understand the theory correctly, whenever the div is relative to something it goes up the tree to the next div that is relative.

But what i wanted to find out is this - what is the actual behavior you are trying to achieve for that sticky div… should it stick to the page or move up with the parent?

I want the grid to be sticky within the div element it contains, since the div is 3000px it should stick to the top of the screen @ 0px, and the scroll animation for the SZA images will work. @IVG

so that once it is in the viewport it stays on the top of the screen as the 300px div scrolls down?

have a look at this - is this what you want to do?

@ TD3Marketing You need to set the parent divs to overflow:visible.

That should do it.

That made the grid move with the screen which is what I want, but the scroll animation doesn’t work however, I’m also trying to figure out how to make it stop once it reaches the next session

To sum it up, I want the grid to be sticky only within the Div block it’s in so the scroll animation plays when people scroll down to the next section then it stops.

@JoeHabgood Sorry forgot to tag

@TD3Marketing

The WhatWeDoGrid will stay fixed until you reach the bottom of BodyWrap.

So pull the ServicesSection out of the BodyWrap and then it will be below.

@JoeHabgood

That’s exactly what I wanted to do that is perfect. I just need to play around with the scroll animation now thanks so much!

No problem - good luck with the site:)