JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<div id="other"></div> 
</div>

CSS

#wrapper { height: 2000px; background: #efefef;position: relative;}
#other {height: 200px; width: 100%; background: #000; position: absolute; top: 700px;}

JavaScript

var canvas = $('#other');
var win = $(window);
    
win.bind('scroll', function(){
   var pos     = canvas.offset();
   var total = pos.top + canvas.height() + win.height();
   win.top  = win.scrollTop();
   var d = win.height() + win.top;
    
   if( pos.top < d && !(total < d) ){ 
       console.log("on screen")
   }

});