Pin on the bottom of the screen
Hello! I'm trying to pin an element at the bottom of the screen until its parent element scrolls to the end.
It should work something like this:
This only works if initially the block with the text is at the top of the block with the picture. But then the block with the text sticks at the top of the screen.
I need the opposite - the block with the text should be below the block with the picture. When the picture appears, the text should be pinned at the bottom of the screen
Sorry, but I don’t understand how to set the top of the green container as a trigger? I only see the possibility of making the bottom of the green container as a trigger.
I need .sticky pinned bottom when the .green container touches the top of the screen. And .sticky should unpin when the bottom of the .green container touches the top of the screen
See the Pen pogWYOG by yuliarushay (@yuliarushay) on CodePen