滚动效果 - 滚动时让组件相互堆叠 CSS

Question

我一直在尝试从这个网站实现这种滚动效果：https://livingbeautyinc.com。当您滚动时，之前的内容会保留在同一位置，而新内容会堆叠在旧内容之上。我试过使用 position:sticky 然后为每个组件设置 z-index 但它似乎不起作用。任何人都知道如何使用 CSS?

制作这种滚动效果

来源：https://codepen.io/daniel5120/pen/PoEoaEP 所以理想情况下，我想让第一个容器上的内容保持原样，然后第二个元素保持在第一个元素之上。

Answer 1

由于 html 和 body 中的高度，您在 codepen 上的代码不适用于 position: sticky。如果您想了解更多，

Here is your modified codepen code.

下面是我做的一个例子，可以帮助我理解为什么你的代码不起作用。

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>

滚动效果 - 滚动时让组件相互堆叠 CSS

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

html

css

web