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?
Here is my public share link: LINK
(how to access public share link)
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?
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?
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.
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.
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:)