我正在构建一个基于水平滚动视图的网站,这是由移动交互和粘性部分组成的。在此粘性部分中,我想放置一个粘性 div,然后,当您水平滚动时,一个 div 保持粘性,同时您水平滚动。
有一个例子: https ://studiochevojon.com/
在这个网站中,您可以水平滚动并在确定的时刻拥有一个粘性 div。
有人可以解释一下这是如何工作的吗?我尝试了所有水平滚动教程,但我不知道如何使它工作。
谢谢你们。
我正在构建一个基于水平滚动视图的网站,这是由移动交互和粘性部分组成的。在此粘性部分中,我想放置一个粘性 div,然后,当您水平滚动时,一个 div 保持粘性,同时您水平滚动。
有一个例子: https ://studiochevojon.com/
在这个网站中,您可以水平滚动并在确定的时刻拥有一个粘性 div。
有人可以解释一下这是如何工作的吗?我尝试了所有水平滚动教程,但我不知道如何使它工作。
谢谢你们。
要粘一个 div 需要样式:position: sticky;
. 然后它需要一个 broder ti 实际上应该坚持的位置(顶部、底部、左侧和/或右侧)和距离(%、vw/vh、px ...)。就像在这个例子中
body {
margin: 0;
padding: 0;
}
#wrapper {
position: absolute;
top: 0;
bottom: 0;
width: 500vw;
display: flex;
background-color: red;
}
.page {
width: 100vw;
padding: 5px;
}
#one {
background-color: yellow;
}
#two {
background-color: green;
}
#three {
background-color: grey;
}
#sticky {
display: flex;
position: sticky;
left: 0;
width: 100vh;
background-color: blue;
padding: 5px;
}
<div id="wrapper">
<div class="page" id="one">I'm page 1</div>
<div class="page" id="two">I'm page 2</div>
<div id="sticky">I'm the Sticky Box</div>
<div class="page" id="three">I'm page 3</div>
</div>