JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo"></div>
<div id="notification"></div>

CSS

html, body {
    margin: 100px 0;
}
#foo {
    height: 1000px;
    background-color: #C00;
    width: 200px;
    margin: 0 auto;
}
#notification {
    position: fixed;
    top: 0;
    left: 0;
}
}

JavaScript

function getVisible() {    
    var $el = $('#foo'),
        scrollTop = $(this).scrollTop(),
        scrollBot = scrollTop + $(this).height(),
        elTop = $el.offset().top,
        elBottom = elTop + $el.outerHeight(),
        visibleTop = elTop < scrollTop ? scrollTop : elTop,
        visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
    $('#notification').text(visibleBottom - visibleTop);
}

$(window).on('scroll resize', getVisible);