JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"></div>
<div id="content-container">
    <div id="content-wrapper">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>
<div id="footer"></div>

CSS

#header{
    height:80px;
    background-color:green;
    position:fixed;
    top:0;
    width:100%;
}
#content-container{
    margin-top:90px;
}
.content{
    height:100px;
    margin:5px;
    border:1px solid black;
}
#footer{
    height:100px;
    background-color:brown;
}

JavaScript

var $win = $(window);
var $footer = $("#footer");
$(window).scroll(function(){
    var windowHeight = $win.height();
    var footerTop = $footer.offset().top - $win.scrollTop();
    var visibleHeight = Math.min(windowHeight, footerTop) - 80;
    console.log(windowHeight +", " + footerTop + ", " + visibleHeight);
});