Css 保持粘性直到下一个粘性div

当一个粘性div进入视图时，如何阻止它与另一个粘性div重叠？目前，如果我有多个粘滞div，它们都堆叠在一起，直到到达最后一个粘滞项，然后它们一起向上移动，但我希望粘滞1保持粘滞在屏幕中央，直到粘滞2击中它，然后它向上移动，粘滞2保持在原位，直到粘滞3击中它，然后它向上移动-所以没有重叠

下一个div实际上是粘性div的边界

另外：

top:50%

是否始终使其垂直居中

HTML

代码笔：

---

这种情况发生在您身上，因为您的背景是透明的，所以请在

粘贴此

div的背景中使用任何颜色

。粘性容器{
位置：相对位置；
}
.粘这个{
背景色：白色；此处添加了/*代码*/
位置：粘性；
高度：1000px；
最高：50%；
}

粘性1
粘性2
粘性3
粘性4

related：当sticky2点击sticky2时，您希望Sticky1向上移动到哪里？它应该只是向上移动并从屏幕顶部消失，还是转到视口顶部并停留在那里，或者。。。

<div class="sticky-container">
  <div class="sticky-this">
    STICKY 1
  </div>
  <div class="sticky-this">
    STICKY 2
  </div>
  <div class="sticky-this">
    STICKY 3
  </div>
  <div class="sticky-this">
    STICKY 4
  </div>
</div>

.sticky-container {
  position:relative;
}

.sticky-this {
  position:sticky;
  height:1000px;
  top:50%
}