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

Question

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.

Answer 1

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 class="pages" style="background-color:red;">
    <h1>Title RED</h1>
    <img src="https://picsum.photos/400/100?random=1">
</div>

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

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

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