我一直試圖從這個網站上實作這種滾動效果：https ://livingbeautyinc.com 。當您滾動時，之前的內容會保持在相同的位置，而新內容會堆疊在舊內容之上。我試過使用position:stickythenz-index為每個組件設定，但它似乎不起作用。任何人都知道如何使用 CSS 制作這種滾動效果？
資料來源：https ://codepen.io/daniel5120/pen/PoEoaEP 所以理想情況下，我想讓第一個容器上的內容保持完全相同，然后第二個元素保持在第一個元素之上。
uj5u.com熱心網友回復：
由于 和 的高度，您的代碼codepen無法使用 。如果您想了解更多資訊，我認為這就是解釋。position: stickyhtmlbody
這是您修改后的codepen代碼。
下面是我為幫助我理解為什么你的代碼不起作用而做的一個例子。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/445175.html
上一篇：我已經升級了我的php，但是<??>代碼開始不起作用？
下一篇：帶邊距的導航欄不會設定為“0”