How do you make the first Img/Vid stay in place while the next section scrolls up over it? It’s an effect I have not seen explained in any of the material thus far.
Hey Jared,
You are referring to sticky position, you can make an element set to scroll “sticky” from the inspector panel.
When an element is sticky, by default when scrolling it sticks to the top of the page (you can also give it an offset from top), until the bottom edge of it’s parent container reaches and “touches” it then it is scrolled of the screen.
Hope this helps.
Ido.
Hope this is what you meant and that it will help you:
https://www.screencast.com/t/Nt8lvIVBjw
ok i am beginning to understand how sticky works inside a grid, and i think i can rephrase my question a little better to help provide more clarity:
I have a background video at the very top of my Hero Section, it’s the first thing you see when you go to the site. I then have the section underneath it, which is a grid filled with containers and Copy that explain the brand, that you scroll down to view.
what i would like to do and have seen done but not explained, is have the second section consume the first section, that being the background video mentioned, while the video stays in place.
it seems like a simple maneuver, i just don’t know how to do it quite exactly yet.
i assume it involves sticky positions, my curiosity is whether or not i need to structure the page in such a way that all of the content sits on one section/grid/container layout or if it will involve two or more separate sections.
still getting the hang of it, but i do see whats possible. thanks again for your help, i greatly appreciate it.
i appreciate your reply, i do understand the basics of sticky position, i think i am still struggling to grasp how they apply in relationship to their parent containers and the subsequent style moves you can make involving the pseudo-animation style presented in the artist videos. more of that content would be awesome.