JSFiddle - React, Tailwind, and code Playground

HTML

<input type='button' style='position:fixed; top:0px;left:0px; z-index:200' value='What do I see?'>
<div id='a' class='check' style='width:1000px;height:200px;background-color:green;'>A</div>
<div id='d' class='check' style='position:absolute; top:200px; left:400px; width:600px;height:600px;background-color:red;'>D</div>
<div id='b' class='check' style='position:absolutel top: 200px; left:0px; width:400px;height:300px;background-color:yellow;'>B</div>
<div id='c' class='check' style='width:400px;height:300px;background-color:orange;'>C</div>
<div id='e' class='check' style='width:1000px;height:200px;background-color:purple;'>E</div>

JavaScript

$('input').click(function(){
   // check for visible divs with class 'check'   
    $('.check').each(function(){
        var pos = $(this).offset(),
            wX = $(window).scrollLeft(), wY = $(window).scrollTop(),
            wH = $(window).height(), wW = $(window).width(),
            oH = $(this).outerHeight(), oW = $(this).outerWidth();
        
        // check the edges
        if (pos.left >= wX && pos.top >= wY && 
            oW + pos.left <= wX + wW && oH + pos.top <= wY + wH )
            alert('Div #' + $(this).attr('id') + ' is fully visible');
        else
        if (((pos.left <= wX && pos.left + oW > wX) ||
              (pos.left >= wX && pos.left <= wX + wW)) &&
            ((pos.top <= wY && pos.top + oH > wY)   ||
            (pos.top  >= wY && pos.top  <= wY + wH)))
            alert('Div #' + $(this).attr('id') + ' is partially visible');
        else
            alert('Div #' + $(this).attr('id') + ' is not visible');
    });        
});