Por favor, ayúdame a escribir un script que realice la siguiente tarea:
es necesario que al hacer scroll, llegando a la sección deseada en el layout,
se corrija el primer bloque "Branding" y el segundo bloque "Comerciales" se encuentre con él
en encienda el siguiente bloque "Estrategia" y así sucesivamente en esta sección (todos los bloques de la misma altura)
Enlace a 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>
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>