Scrolling effect - Make components stack on top of each other when scrolling CSS-CodePudding

I've been trying to achieve this scrolling effect from this website: https://livingbeautyinc.com. As you scroll, the previous content stays on the same position and the new content stacks on top of the old one. I've tried using the position:sticky then set the z-index for each component but it doesn't seem to work. Anyone has any idea how to make this scrolling effect with CSS?

Source: https://codepen.io/daniel5120/pen/PoEoaEP So ideally I want to make the contents on the first container stay exactly the same where they are and then the second element stays on top of the first one.

CodePudding user response：

Your code on codepen did not work with position: sticky due to the height in html and body. If you want to learn more, I think this is the explanation.

Here is your modified codepen code.

And below is an example I did to help me understand why your code didn't work.

html, body {
    margin: 0px;
    padding: 0px;
}

.pages {
    position: sticky;
    width: 100%;
    height: 100vh;
        top: 0;
    
    display: inline-block;
    padding: 10px;
    box-sizing: border-box;
}

<div  style="background-color:red;">
    <h1>Title RED</h1>
    <img src="https://picsum.photos/400/100?random=1">
</div>

<div  style="background-color:yellow;">
    <h1>Title YELLOW</h1>
    <img src="https://picsum.photos/400/100?random=2">
</div>

<div  style="background-color:blue;">
    <h1>Title BLUE</h1>
    <img src="https://picsum.photos/400/100?random=3">
</div>

<div  style="background-color:green;">
    <h1>Title GREEN</h1>
    <img src="https://picsum.photos/400/100?random=4">
</div>