Share Posted January 18 So, what I am trying to achieve is that when I scroll, the .images-container should be "behind" the hero and it's " blocked/pinned/it doesn't move down ". When the hero is completely out of the viewport, only then the .images-container should "unblock" and you can actually start scorlling to see the next gray rectangles. Right now, the .images-container comes from bottom of the viewport. It should be already there. To be more clear, imagine that I don't have the .hero element. Just comment it out in html and js. As you can see, .images-container is already in viewport and you can scroll down ( nothing crazy ). Now, what I want to achieve is that if I add the .hero element, as I scroll down the .hero element leaves the viewport and .images-container is revealed ( like a mask or like a curtain ). When the .hero element is out of viewport, only then you can start " scrolling " as you would normal do if there was no .hero element. I know I didn't make myself clear, but I tried as much as I could. See the Pen dyjZNvR by bogdan-florin (@bogdan-florin) on CodePen Link to comment Share on other sites More sharing options...
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!Register a new account
Already have an account? Sign in here.Sign In Now