J'essaie d'obtenir un effet similaire à ce que je vois ici

Mais le contenu de chaque section doit également pouvoir défiler, c'est-à-dire qu'il ne sera corrigé que lorsqu'il atteindra le bas de la section.

Par exemple, lorsque le contenu est 200vh, comme ceci :

section {
  position: sticky;
  top: 0;
  height: 200vh;
}

section img{
  width:100%;
  height:100%
}


section:nth-of-type(1) {
  background: rgb(225, 204, 200);
}

section:nth-of-type(2) {
  background: rgb(240, 216, 163);
}

section:nth-of-type(3) {
  background: rgb(192, 211, 217);
}

<section>
    <img src="https://picsum.photos/id/128/800/300" alt="">
</section>

<section>
    <img src="https://picsum.photos/id/48/800/300"alt="">
</section>

<section>
    <img src="https://picsum.photos/id/42/800/300" alt="">
</section>

Comme vous pouvez le voir, les parties 1 et 2 sont épinglées en haut et nous ne pouvons pas faire défiler pour voir leurs photos.

Mais la dernière partie fonctionne parfaitement.

Alors, comment puis-je obtenir cet effet ? Idéalement, utilisez du CSS pur, mais je suis également ouvert aux solutions JavaScript.