JSFiddle - React, Tailwind, and code Playground

HTML

<div class='test'>Lorem ipsum doner inut.
    <div id='myDiv-1'>myDiv-1</div>
    <div id='myDiv-2'>myDiv-2</div>
</div>

CSS

body{
    height:15px;
    overflow:auto;
}

#myDiv-1{
    height:450px;
    overflow:auto;
}
.test{
    height:880px;
    width:100%;
    background:#ccc;
    padding:250px 0 0;
}

JavaScript

$(function(){
    $('div#myDiv-2').show();
    $('div#myDiv-1').hide();
    $(window).scroll(function(){
       if($('div#myDiv-2').is(":visible"))
       {
           $('div#myDiv-1').show();// shows the first div
           $('div#myDiv-2').hide();// hide the second div
       }
    });
});