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 class="services-section">
<div class="container">
<!-- Title -->
<h2 class="h1 services-section__title section-title">Services</h2>
<div class="row services-section__row">
<!--Item 1 -->
<div class="services-section-item services-item">
<!-- Title -->
<h3 class="services-item__title">Branding</h3>
<!-- Description -->
<div class="services-item__desc">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 class="services-section-item services-item">
<!-- Title -->
<h3 class="services-item__title">Commercials</h3>
<!-- Description -->
<div class="services-item__desc">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 class="services-section-item services-item">
<!-- Title -->
<h3 class="services-item__title">Strategy</h3>
<!-- Description -->
<div class="services-item__desc">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>
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 class="services-section">
<div class="container">
<!-- Title -->
<h2 class="h1 services-section__title section-title">Services</h2>
<div class="row services-section__row">
<!--Item 1 -->
<div class="services-section-item services-item">
<!-- Title -->
<h3 class="services-item__title">Branding</h3>
<!-- Description -->
<div class="services-item__desc">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 class="services-section-item services-item">
<!-- Title -->
<h3 class="services-item__title">Commercials</h3>
<!-- Description -->
<div class="services-item__desc">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 class="services-section-item services-item">
<!-- Title -->
<h3 class="services-item__title">Strategy</h3>
<!-- Description -->
<div class="services-item__desc">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>