JSFiddle - React, Tailwind, and code Playground

by asifrc

HTML

<div id="header">
    
    <span id="txt"></span>
</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 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%;
    margin-bottom: 100px;
}
#content-container{
    margin-top:90px;
}
.content{
    height:100px;
    margin:5px;
    border:1px solid black;
}
#footer{
    height:500px;
    background-color:brown;
}

JavaScript

$(document).on('scroll', function() {
    //Container
    var cont = $("#content-container");
    
    //Scroll Position (varies with scroll)
    var pageTop = $(document).scrollTop();
    //Visible Page Size (fixed)
    var pageSize = $(window).height();
    
    //Header Height (fixed)
    var headerHeight = $('#header').height();
    
    //Content top (fixed)
    var contTop = cont.offset().top;
    //Content top position (varies with scroll)
    var contTopPos = contTop - pageTop;
    //Content bottom (fixed)
    var contBottom =  cont.height() + contTop;
    //Content position in relation to screen top (varies with scroll)
    var contBottomPos = contBottom - pageTop;
    
    /*
        VISIBLE AREA
        Take the size of screen/page, unless the bottom of the content further up
            and subtract from it
        The header height, unless the top of the content is below the header
    */
    var visibleArea = Math.min(pageSize, contBottomPos) - Math.max( headerHeight, contTopPos);
    
    $('#txt').html( "Visible Area of "+cont.attr('id')+" is "+ contTop + ', ' + visibleArea + 'px');
});