Question

我是根据水平滚动视图构建网站的，它是由移动交互和粘性区域组成的。在此粘性区域内，我想放置一个粘性div，然后，当水平滚动时，一个div保持粘性，同时水平滚动。

在此网站上，您可以水平滚动并在确定的时刻具有粘性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;。然后，它需要一个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>

水平滚动视图内的粘性Div

1 个答案: