JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
  <p>
  Scroll the page down until the top of the box is slightly out of the viewport
  </p>
  <div id="overflowwrap">
    <div id="five" class="box">a lot of content</div>
    <div id="four" class="box">a lot of content</div>
    <div id="three" class="box">a lot of content</div>
    <div id="two" class="box">a lot of content</div>
    <div id="one" class="box">a lot of content</div>
  </div> 
</div>

CSS

#outer {
  /* emulate box being present on larger page */
  padding: 10em 1em;
  background: violet;
}
#overflowwrap {
  overflow: hidden !important;
}
.box {
  height: 800px;
  display: none; /* initially hidden */
}

#one { background-color: red; }
#two { background-color: orange; }
#three { background-color: yellow; }
#four { background-color: green; }
#five { background-color: blue; }

JavaScript

$('#overflowwrap').css('max-height',$(window).height());

function run () {
	$("#one").fadeIn(500);
  setTimeout( function() {
    $("#one").hide();
    $("#two").fadeIn(500);
  }, 3000);
  setTimeout( function() {
    $("#two").hide();
    $("#three").fadeIn(500);
  }, 6000);
  setTimeout( function() {
  	$("#three").hide();
    $("#four").fadeIn(500);
  }, 9000);
  setTimeout( function() {
    $("#four").hide();
    $("#five").fadeIn(500);
  }, 12000);
  setTimeout( function() {
  	$("#five").hide();
    $(".box").hide()
    run();;
  }, 15000);
}
run();