2 column layout with dependent scrolling

Question

I am pretty new to all this and want to create a two column layout for a portfolio. In the left column I have projects images displayed and in the right column a piece of information.

I want the left column to also when cursor is on the right column vice versa.

But the container for images is higher than the browser window, the information container is not. As long as project-A is displayed I want information-A to stay sticky at the top of the window and the image-container-A to scroll. When the bottom of the image-container-A is reached I want Project-B to come scroll up into view with information-B and image-container-B scrolling together.
The information-container-A should stop being sticky and scroll out together with image-container-A and Information-B scrolls up until it becomes sticky at the top and only image-container-B continues to scroll. So on.

Basically like here: https://tokyo-voice.jp I don't really know how to tackle this. Hope it's clear what I mean.

Answer 1

This is what position sticky does best. So I recommend that you do a bit of reading about it. I also recommend reading about CSS flex because it makes creating layouts like this a bit easier.

That said, here's something to get you started.

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