How to make a block overlap effect when scrolling JS?-CodePudding

Please help me write a script that will perform the following task:
it is necessary that when scrolling, reaching the desired section in the layout, the first block "Branding" was fixed, and the second block "Commercials" ran into it in turn on it the next block "Strategy" and so on in this section (all blocks of the same height)

Link to Codepen

<section >
  <div >
    <!-- Title -->
    <h2 >Services</h2>

    <div >
      <!--Item 1 -->
      <div >
        <!-- Title -->
        <h3 >Branding</h3>

        <!-- Description -->
        <div >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
      </div>

      <!--Item 2 -->
      <div >
        <!-- Title -->
        <h3 >Commercials</h3>

        <!-- Description -->
        <div >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
      </div>

      <!--Item 3 -->
      <div >
        <!-- Title -->
        <h3 >Strategy</h3>

        <!-- Description -->
        <div >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
      </div>

    </div>

  </div>
</section>

CodePudding user response：

Use position: sticky;

.services-item {
  padding: 40px;
  height: 250px;
  overflow: hidden;
  background-color: #eee;
  margin-bottom: 30px;
  position: sticky;
  top: 10px;
}

.services-section {
padding-bottom: 100vh;
}

<section >
  <div >
    <!-- Title -->
    <h2 >Services</h2>

    <div >
      <!--Item 1 -->
      <div >
        <!-- Title -->
        <h3 >Branding</h3>

        <!-- Description -->
        <div >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
      </div>

      <!--Item 2 -->
      <div >
        <!-- Title -->
        <h3 >Commercials</h3>

        <!-- Description -->
        <div >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
      </div>

      <!--Item 3 -->
      <div >
        <!-- Title -->
        <h3 >Strategy</h3>

        <!-- Description -->
        <div >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
      </div>

    </div>

  </div>
</section>