JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one" class="odd"><h1>ONE</h1></div>
<div id="two"><h1>TWO</h1></div>
<div id="three" class="odd"><h1>THREE</h1></div>
<div id="four"><h1>FOUR</h1></div>
<div id="five" class="odd"><h1>FIVE</h1></div>
<div id="six"><h1>SIX</h1></div>
<div id="seven" class="odd"><h1>SEVEN</h1></div>
<div id="eight"><h1>EIGHT</h1></div>
<div id="nine" class="odd"><h1>NINE</h1></div>
<div id="ten"><h1>TEN</h1></div>

CSS

div {
    height:10em;
    width:100%;
}
.odd {
    background: #e2e2e2;
}
div {
    background: #999999;
}

JavaScript

$( document ).ready(function() {
    var heightof = $('#one').height() + $('#two').height();
    
    $(window).scroll(function(){
        var y = $(this).scrollTop();

        if(y >= heightof)
        {
            $('#one, #two').remove();
            $(this).scrollTop('0px');
        }
    });  
});