2列布局与相关滚动

Question

对于这一切我还很陌生，想为投资组合创建两列布局。 在左列中，显示了项目图像，在右列中，显示了一条信息。

当光标位于右列时，我也希望左列也是如此。

但是图像容器比浏览器窗口高，而信息容器则没有。 只要显示项目A，我就希望信息A在窗口顶部保持粘性，而图像容器A滚动。 当到达图像容器A的底部时，我希望Project B向上滚动，使信息B和图像容器B一起滚动。
信息容器A应该不再发粘，并与图像容器A一起滚动出去，并且信息B向上滚动，直到它在顶部变得发粘，只有图像容器B继续滚动。 等等。

基本上像这里：https://tokyo-voice.jp 我真的不知道该如何解决。 希望我的意思很清楚。

Answer 1

这是position sticky最擅长的。因此，我建议您对它进行一些阅读。我还建议您阅读有关CSS flex的内容，因为它会使创建这样的布局更加容易。

也就是说，这里有一些可以帮助您入门的东西。

.project {
  display: flex;
  margin-bottom: 1em;
  position: relative;
  background: #131418;
  color: #fefefe
}

.column {
  flex: 1 1 50%;
  padding: 1em;
}

.right-column .description {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.column img {
  display: block;
  max-width: 100%;
  margin-bottom: 0.5em;
}

<div class="main-wrapper">
  <div class="project project-a">
    <div class="column left-column">
      <img src="https://via.placeholder.com/1000">
      <img src="https://via.placeholder.com/1000">
      <img src="https://via.placeholder.com/1000">
    </div>
    <div class="column right-column">
      <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</div>
    </div>
  </div>
  <div class="project project-b">
    <div class="column left-column">
      <img src="https://via.placeholder.com/1000">
      <img src="https://via.placeholder.com/1000">
      <img src="https://via.placeholder.com/1000">
    </div>
    <div class="column right-column">
      <div class="description">ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</div>
    </div>
  </div>
  <div class="project project-c">
    <div class="column left-column">
      <img src="https://via.placeholder.com/1000">
      <img src="https://via.placeholder.com/1000">
      <img src="https://via.placeholder.com/1000">
    </div>
    <div class="column right-column">
      <div class="description"> labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</div>
    </div>
  </div>
</div>