Horizo​​ntalScrollView 内的粘性 div

Question

我正在构建一个基于水平滚动视图的网站，这是由移动交互和粘性部分组成的。在这个粘性部分中，我想放置一个粘性 div，然后，当您水平滚动时，一个 div 保持粘性，同时您水平滚动。

有一个例子： https://studiochevojon.com/

在这个网站中，你可以水平滚动并在确定的时刻拥有一个粘性 div。

有我的webflow项目：https://preview.webflow.com/preview/designfeelings?utm_medium=preview_link&utm_source=dashboard&utm_content=designfeelings&preview=1bd0bbb81feac58ef0d75e3ee82d61d0&mode=preview

有人可以解释一下这是如何工作的吗？我尝试了所有水平滚动教程，但我不知道如何使它起作用。

谢谢大家。

Answer 1

要保持粘性，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>