如何实现多个sticky div接力居中停靠不重叠，top:50%能否精准垂直居中

问题原因 #

你当前所有sticky元素都挂载在同一个父容器下，sticky定位的失效边界为直接父元素的底部，因此所有sticky元素的失效边界都是同一个sticky-container的底部，导致多个元素进入视口后全部堆叠在top:50%的位置，直到父容器整体移出视口才共同上移。

修复方案 #

给每个sticky元素单独包裹一层独立的父容器，每个父容器的高度设置为你需要的单块sticky滚动区间长度，这样每个sticky元素的失效边界就是自己专属父容器的底部，当下一个sticky元素滚动到固定位置时，上一个sticky的父容器底部刚好到达固定位置，就会把上一个元素向上推出视口，实现交替固定的效果。

调整后代码 #

HTML

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

CSS

.sticky-container {
  position: relative;
}

.sticky-wrapper {
  /* 单个sticky元素的滚动区间高度，和你之前设置的sticky元素高度一致 */
  height: 1000px;
  position: relative;
}

.sticky-this {
  position: sticky;
  top: 50%;
  /* 配合top:50%实现真正的垂直居中 */
  transform: translateY(-50%);
}

不能。top:50%的作用是将元素的顶部边缘定位在视口高度的50%位置，在元素自身有高度的情况下，整体元素会向下偏移自身高度的一半，并没有实现真正的居中。要实现精准垂直居中，需要额外添加transform: translateY(-50%)，将元素向上偏移自身高度的50%，让元素的中心点和视口的50%位置完全重合。

内容的提问来源于stack exchange，提问作者user2115227