1

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

当光标位于右列时，我希望左列也可以，反之亦然。

但图像容器高于浏览器窗口，信息容器则不然。只要显示项目-A，我希望信息-A 在窗口顶部保持粘性，并且图像容器-A 可以滚动。当到达图像容器 A 的底部时，我希望项目 B 向上滚动到视图中，同时信息 B 和图像容器 B 一起滚动。
信息容器-A 应该停止粘性并与图像容器-A 一起滚动，信息-B 向上滚动直到它在顶部变得粘性并且只有图像容器-B 继续滚动。很快。 在此处输入图像描述

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

4

1 回答 1

1

这是粘性位置最擅长的。所以我建议你做一些阅读。我还建议阅读有关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>

于 2020-01-12T15:44:18.187 回答