JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myDiv-1">Scroll until I dissapear</div>
<div id="myDiv-2">And I shall become visible</div>
<div id="pad"></div>

CSS

body {width: 100%; height: 500%;}

#pad {position: relative; left: 0; height: 10px; width: 10px; top: 1500px;}

#myDiv-1 {position: relative; left: 10px; height: 100px; width: 100px; background: red; top: 400px;}

#myDiv-2 {position: fixed; left: 10px; height: 100px; width: 100px; background: cyan; top: 10px; display:none;}

JavaScript

$(window).on('scroll', function() {
    var y  = $(window).scrollTop(),
        e1 = $('#myDiv-1'),
        e2 = $('#myDiv-2'),
        vi = e1.offset().top < (y + $(window).height()) && (e1.offset().top + e1.height()) > y;
        
    e2.toggle(!vi);
});