How to make the children in the viewport as long as the parent is visible

I have 2 similar parent with a height of 400vh. And inside of both I have a children of height: 100vh; width: 100%.

This is an example

#parent {    height: 400vh;    background: green;    padding: 1rem;    &.2 {      background: blue;    }  }    #children {    height: 100vh;    background: red;  }

<div id="parent">    <div id="children">      children content    </div>  </div>  <div id="parent" style="background: blue">    <div id="children">      children content    </div>  </div>

But i want the children to always be in the viewport as long as the parent is displayed. To be clearer, i want the children to move inside the parent to be always visible but it stops at the bottom of the parent.

This is an example of how I want it to work

body {    margin: 0;    padding: 0;  }    #parent {    background: green;    height: 400vh;    padding: 2.5vw;  }    #children {    width: 90vw;    height: 90vh;    background: red;    position: fixed;  }

<div id="parent">    <div id="children">      chidren-content      <div />    </div>

But I can't do that with multiple parent's because of the fixed property. I have tried to replace it with JS when the children is almost at the end of the parent but it does weird things.

So anyone have an idea to do that with multiple parents ?

https://stackoverflow.com/questions/67040714/how-to-make-the-children-in-the-viewport-as-long-as-the-parent-is-visible April 11, 2021 at 09:33AM