滚动效果：Div 滚动到视图中，停止一次垂直居中位置：粘性，然后滚动出屏幕

Question

我不确定在不使用 javascript 的情况下是否可行，但我想问问是否有人已经找到了一种纯粹的 css 方法来做到这一点。

所以我有 2 列，我希望其中一列在您滚动时显示一堆图像，另一列显示一些文本。文本应滚动到视图中，然后停留在屏幕中间，直到图像全部滚动，然后与图像一起滚出屏幕，以便下一部分滚动到视图中。使用 top: 50% 会将文本粘贴到视图的一半，但我正在寻找一种方法让它粘贴到视图的中心。有什么想法吗？

section {
  height: 200vh;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.row {
    display: flex;
}

.col {
    flex: 1;
}

.sticky-content {
    position: -webkit-sticky;
    position: sticky;
    top: 50%; /* I can set this to about 30% to make sure most of the time it looks about right, but it's not the same as getting this div to centre exactly in the middle vertically until it's time to scroll off the screen */
}

img {
  width: 100%;
  height: auto;
  }

<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="sticky-content">
          <h2>A heading</h2>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
        </div>
      </div>
      <div class="col">
        <div>
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="sticky-content">
          <h2>A heading</h2>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
        </div>
      </div>
      <div class="col">
        <div>
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

你很接近，你有 top:50%;，现在给 .sticky-content 一个 transform:translateY(-50%); 将其拉回到其高度的 50%，然后你就可以垂直了居中。这是你期待的吗？

section {
  height: 200vh;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.row {
    display: flex;
}

.col {
    flex: 1;
}

.sticky-content {
    position: -webkit-sticky;
    position: sticky;
    top: 50%; /* I can set this to about 30% to make sure most of the time it looks about right, but it's not the same as getting this div to centre exactly in the middle vertically until it's time to scroll off the screen */
    transform:translateY(-50%);
}

img {
  width: 100%;
  height: auto;
  }

<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="sticky-content">
          <h2>A heading</h2>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
        </div>
      </div>
      <div class="col">
        <div>
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="sticky-content">
          <h2>A heading</h2>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
        </div>
      </div>
      <div class="col">
        <div>
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
        </div>
      </div>
    </div>
  </div>
</section>

滚动效果：Div 滚动到视图中，停止一次垂直居中位置：粘性，然后滚动出屏幕

Scrolling effect: Div scrolls into view, stops once centrered vertically with position: sticky, and then scrolls off screen

html

css

scroll

position

sticky