CODEWITHSUNDEEP
javascriptcssscrollcss-positionsticky
JoeBe
JoeBe

Reputation: 1290

How to keep all elements at sticky position until a trigger is called?

I have a page where an image is decreased in size while scrolling. Once it reaches a specific size another image appears. From there on the scroll behavior should be the same as in scrollytelling approaches.

My problem right now is that all the subsequent div's are not "waiting" for this event of image change. I can only tell the first subsequent div to stop until this event occurs and change its position to relative once it occurs. But with this solution, it seems to be more messed up.

Here is a JSFiddle with a sample setup. I would like that none of the text div's move until the red div appears. And then it should start moving from its current position.

Upvotes: 2

Views: 322

Answers (1)

JoeBe
JoeBe

Reputation: 1290

I could solve the issue myself (in some way).

I added a container div to all content after the div with the images and made its opacity: hidden. While scrolling, the content is actually scrolling upwards, but it cannot be seen. Once the images change I add a margin-top to the content container with the value of the scrolled distance (+ some buffer) and remove the opacity: hidden class.

Here is a JSFiddle

However, this is not the solution described in the question, where the content should be visible and "wait" at its position, but for my circumstances, it is an acceptable answer. But I will not make this the accepted answer of my question.

Upvotes: 1

Related Questions