JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo" class="visible"></div>
<div id="bar" class="visible"></div>
<div id="notification">
</div>

CSS

html, body {
    height: 2000px;
}
#foo {
    position: absolute;
    height: 1000px;
    background-color: #C00;
    width: 200px;
    height: 1800px;
    top: 100px;
    left: 300px;
}
#bar {
    height: 1000px;
    background-color: #0C0;
    width: 100px;
    margin: 50px;
}
#notification {
    position: fixed;
    top: 0;
    left: 0;
}
}

JavaScript

function getVisible($el) {    
    var scrollTop = $(window).scrollTop(),
        scrollBot = scrollTop + $(window).height(),
        elTop = $el.offset().top,
        elBottom = elTop + $el.outerHeight(),
        visibleTop = elTop < scrollTop ? scrollTop : elTop,
        visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
    return Math.max(visibleBottom - visibleTop, 0);
}

$(window).scroll(function() {
    var fooVis = getVisible($('#foo'));
    var barVis = getVisible($('#bar'));
    $('#notification').text(fooVis + ' // ' + barVis);
});