如何突破项目列表中的 position:sticky？

Question

我有一个物品清单。一旦底部项目向上滚动到其余项目并且所有项目都具有相同的间距，我希望它们在我滚动时一起继续向上移动。

现在它们在向上移动之前相互堆叠。

这是 codepen 上的示例：https://codepen.io/xdth/pen/gOPBKNw

.block {
  height: 1500px;
}

.list {
  margin-top: 400px;
}

li {
  padding: 65px;
  font-size: 20px;
}

#one {
  position: sticky;
  top: 20vh;
}

#two {
  position: sticky;
  top: 30vh;
}

<div class="block">
  Scroll down
  <ul class='list'>
    <li id='one'>one</li>
    <li id='two'>two</li>
    <li id='three'>three</li>
  </ul>
</div>

如何让它们一起上升而不堆叠？

Answer 1

您可以使用一些负边距来近似此：

.block {
  height: 800vh;
}

.list {
  margin-top:100vh;
}

li {
  padding: 65px;
  font-size: 20px;
  position: sticky;
}

#one {
  top: 10vh;
}
#two {
  top: 20vh;
  margin-bottom:-150px; /* 150px is an approximation of the height of the li */
}
#three {
  top: 30vh;
  margin-top:150px; /* the negation of the above one */
  margin-bottom:-300px; /* twice the size here */
}

<div class="block">
  Scroll down
  <ul class='list'>
    <li id='one'>one</li>
    <li id='two'>two</li>
    <li id='three'>three</li>
  </ul>
</div>

如何突破项目列表中的 position:sticky？

How to break out of position:sticky in a list of items?

html

css

css-position

sticky