Sticky mid screen without large gap above, how?
Hi everyone,
I have a 200vh parent, and I have an element that i'd like to sticky to the middle of screen while i scroll the parent (and there are GSAP actions triggering based on the scroll progress through the 200vh parent). I tried two approachs:
1- Set parent 200vh, put element inside, sticky top 50% and translateY -50%, problem is that the element starts off quiet high above bounds of its parent (due to the translate), so that didn't work.
2- Set parent to 200vh, set child 100Vh stick top 0 and flex center align what's inside, then put element inside the chils - this way the element is in the middle of the 100vh. Problem is in the start there's a bit of a gap above the element since it's center in a 100vh.
What would be the ideal approach here??
I have a 200vh parent, and I have an element that i'd like to sticky to the middle of screen while i scroll the parent (and there are GSAP actions triggering based on the scroll progress through the 200vh parent). I tried two approachs:
1- Set parent 200vh, put element inside, sticky top 50% and translateY -50%, problem is that the element starts off quiet high above bounds of its parent (due to the translate), so that didn't work.
2- Set parent to 200vh, set child 100Vh stick top 0 and flex center align what's inside, then put element inside the chils - this way the element is in the middle of the 100vh. Problem is in the start there's a bit of a gap above the element since it's center in a 100vh.
What would be the ideal approach here??
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
