javascript - Pure CSS overlay scrolling

Question

using only css and html, is it possible to scroll away the inner div (overlay red div) completely before scrolling down the rest of the page? Essentially, wondering if overlay scrolling while freezing the behind div is possible in only css? Then once the red div is gone, unfreeze the background scrolling and continue on. Similar to this site here: https://humaan.com/ . Or would some sort of JavaScript need to be used?

.headervideo{background-color:blue; width:100%; height:900px;}
.headerbreak{width:100%; height:300px;}

.headervideo #inner-box {
  background-color: red;
  height: 90%;
  width: 100%;
}

<div class="headervideo">
  <div id="inner-box"></div>
</div>

<div class="headerbreak">
<div>

Answer 1

position:sticky can approximate this:

.headervideo {
  background: url(https://picsum.photos/id/1064/800/800) center/cover;
  height: 100vh;
  position: relative;
  z-index: 2;
}

.nextsection {
  background: url(https://picsum.photos/id/107/800/800) center/cover;
  height: 100vh;
  margin-top: -100vh;
  position: sticky;
  top: 0;
}

.container {
  height:200vh;
}

body {
  margin: 0;
}

<div class="container">
  <div class="headervideo"></div>

  <div class="nextsection"></div>
</div>

<div style="height:150vh"> more content later </div>