2 колонки с зависимой прокруткой

Question

Я довольно новичок во всем этом и хочу создать макет из двух столбцов для портфолио. В левом столбце у меня отображаются изображения проектов, а в правом столбце - часть информации.

Я хочу, чтобы левый столбец также отображался, когда курсор находится в правом столбце, наоборот.

Но Контейнер для изображений выше окна браузера, информационный контейнер - нет. Пока отображается проект-A, я хочу, чтобы информация-A оставалась закрепленной в верхней части окна, а изображение-контейнер-A - для прокрутки. Когда нижняя часть изображения-контейнера-A будет достигнута, я хочу, чтобы Project-B прокручивался вверх с просмотром информации-B и изображения-контейнера-B вместе.
Информационный контейнер-A должен перестать быть липким и Прокрутка вместе с прокруткой изображения-контейнера-A и Информации-B вверх, пока она не станет липкой вверху, и только прокрутка изображения-контейнера-B продолжит прокрутку. Скоро.

В основном как здесь: https://tokyo-voice.jp Я действительно не знаю, как справиться с этим. Надеюсь, понятно, о чем я.

Answer 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>