我正在尝试实现一个类似我在这里看到的效果
但是每个部分的内容也应该是可滚动的，即只有在达到部分底部时才会固定。
例如，当内容为200vh时，像这样：
section {
position: sticky;
top: 0;
height: 200vh;
}
section img{
width:100%;
height:100%
}
section:nth-of-type(1) {
background: rgb(225, 204, 200);
}
section:nth-of-type(2) {
background: rgb(240, 216, 163);
}
section:nth-of-type(3) {
background: rgb(192, 211, 217);
}
<section>
<img src="https://picsum.photos/id/128/800/300" alt="">
</section>
<section>
<img src="https://picsum.photos/id/48/800/300"alt="">
</section>
<section>
<img src="https://picsum.photos/id/42/800/300" alt="">
</section>
正如你所看到的，第1和第2部分固定在顶部，我们无法滚动查看它们的照片。
但是最后一部分完美地工作。
那么我该如何实现这个效果？理想情况下使用纯CSS，但我也接受JavaScript解决方案。
我找到了一个解决方案！使用JavaScript中的一行代码来设置
topdocument.querySelectorAll(".item").forEach((el)=>{ el.style.top=(document.documentElement.clientHeight - el.offsetHeight)+"px" });section{ position:sticky; width:100%; height:200vh; } img{ object-fit:cover; height:100%; width:100%; }虽然我不确定如果窗口被调整大小是否会起作用
但你可以始终使用
onresize来处理这种情况如果有的话，我仍然可以接受纯CSS解决方案？