The title is rewritten as: How to achieve the scrolling effect of the bottom paste function?

Question

I'm trying to achieve an effect similar to what I see here

But the content of each section should also be scrollable, i.e. it will only be fixed when it reaches the bottom of the section.

For example, when the content is 200vh, like this:

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>

As you can see, Parts 1 and 2 are pinned to the top and we can't scroll to see their photos.

But the last part works perfectly.

So how do I achieve this effect? Ideally use pure CSS, but I'm also open to JavaScript solutions.

Answer 1

I found a solution! Use one line of code in JavaScript to set top

document.querySelectorAll(".item").forEach((el)=>{ el.style.top=(document.documentElement.clientHeight - el.offsetHeight)+"px" });

section{
  position:sticky;
  width:100%;
  height:200vh;
}

img{
  object-fit:cover;
  height:100%;
  width:100%;
}

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

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

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

Though I'm not sure if it will work if the window is resized
But you can always use onresize to handle this situation

Is there still a pure CSS solution that I can accept, if any?