CODEWITHSUNDEEP
javascripthtmlcssscrollcollapsable
Sabadabado
Sabadabado

Reputation: 3

How to make an image within a div collapse as you scroll?

I am trying to mirror what this person has on their website under the 'projects' section (https://www.sophiewestfall.com/)where as you scroll, the image relating to the project kind of "scrolls up and hides away" and you're left with the project header. Rather than my sections take up the whole viewport, I want it confined to a container, that when you scroll through the site, the main container div pauses until all the images have collapsed and it is just the headers that remain. I am still new to coding and I think I need to use javascript to accomplish this, I am just at a loss on how to approach this.

Here is my HTML and CSS pen : https://codepen.io/sabrina-herrera/pen/Vwgejqd I want the .projectscontainers divs to be like this when fully expanded

.projectscontainer {
    border: solid 2px #593832;
    width: 988px;
    height: 498px;
}

and like this when scrolled up and the image collapsed (the header is 91px)

.projectscontainer {
    border: solid 2px #593832;
    width: 988px;
    height: 91px;
}

Upvotes: 0

Views: 182

Answers (1)

Senyaak
Senyaak

Reputation: 23

You need to set the position attribute to fixed when the element reaches the top of the page. Here is the question and the answer you can use - How can I make a div stick to the top of the screen once it's been scrolled to?

Upvotes: 0

Related Questions