JSFiddle - React, Tailwind, and code Playground

HTML

<p><a class="trigger">Check visibility now!</a></p>
<p>Now scroll to the _middle_</p>
<div class="tally">&nbsp;</div>
<div class="test">This is the div for which visibility is tested, do you see it?</div>
<p><a class="trigger">Check visibility now!</a></p>
<p>Now scroll to the very bottom</p>
<div class="tally">&nbsp;</div>
<a class="trigger">Check visibility now!</a>

CSS

.test {
    border: dashed 1px red;
}
.tally {
    height: 2000px;
}
.trigger {
    color: green;
    cursor: pointer;
}

JavaScript

function test() {
    var $elem = $('.test');
    var visibleAtTop = $elem.offset().top + $elem.height() >= window.scrollY;
    var visibleAtBottom = $elem.offset().top <= window.scrollY + $(window).height();
    if (visibleAtTop && visibleAtBottom) {
        alert('visible');
    } else {
        alert('invisible (at ' + (visibleAtTop ? 'bottom' : 'top') + ')');
    }
}

$('.trigger').click(test);