Ich versuche einen ähnlichen Effekt zu erzielen, wie ich ihn hier sehe

Aber der Inhalt jedes Abschnitts sollte auch scrollbar sein, d. h. er wird erst fixiert, wenn er das Ende des Abschnitts erreicht.

Wenn der Inhalt beispielsweise 200vh ist, so:

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>

Wie Sie sehen können, sind Teil 1 und 2 oben angepinnt und wir können nicht scrollen, um ihre Fotos zu sehen.

Aber der letzte Teil funktioniert perfekt.

Wie erreiche ich diesen Effekt? Idealerweise verwende ich reines CSS, ich bin aber auch offen für JavaScript-Lösungen.