Ich versuche einen ähnlichen Effekt zu erzielen, wie ich ihn hier sehe
Aber der Inhalt jedes Abschnitts sollte auch scrollbar sein, d. h. er wird erst fixiert, wenn er das Ende des Abschnitts erreicht.
Wenn der Inhalt beispielsweise200vhist, so:
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); }
Wie Sie sehen können, sind Teil 1 und 2 oben angepinnt und wir können nicht scrollen, um ihre Fotos zu sehen.
Aber der letzte Teil funktioniert perfekt.
Wie erreiche ich diesen Effekt? Idealerweise verwende ich reines CSS, ich bin aber auch offen für JavaScript-Lösungen.
我找到了一个解决方案！使用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解决方案？