JSFiddle - React, Tailwind, and code Playground

HTML

<section id="one"></section>
<section id="two"></section>
<section id="three"></section>
<section id="four"></section>
<section id="five"></section>
<section id="six"></section>
<div id="data">data here</div>

CSS

body {
    background-color: rgba(255, 191, 127, 1);
    font-family: Arial, sans-serif;
}

section {
    background-color: rgba(175, 153, 131, 1);
    height: 50vh;
    font-size: 5vh;
    line-height: 50vh;
    margin: 10vh auto;
    overflow: hidden;
    text-align: center;
    width: 50vw;
}

#data {
    background-color: rgba(255, 255, 255, .5);
    left: 0;
    padding: .5em;
    position: fixed;
    top: 0;
}

JavaScript

function listVisibleBoxes() {
    
    var results = [];
    
    $("section").each(function () {
        
        var screenTop = document.documentElement.scrollTop;
        var screenBottom = document.documentElement.scrollTop + $(window).height();
        var boxTop = $(this).offset().top;
        var boxHeight = $(this).height();
        var boxBottom = boxTop + boxHeight;
        
        if(boxTop > screenTop) {
            if(boxBottom < screenBottom) {
                //full box
                results.push(this.id + "-100%");
                $(this).html("100%");
            } else if(boxTop < screenBottom) {
                //partial (bottom)
                var percent = Math.round((screenBottom - boxTop) / boxHeight * 100) + "%";
                results.push(this.id + "-" + percent);
                $(this).html(percent);
            }
        } else if(boxBottom > screenTop) {
            //partial (top)
            var percent = Math.round((boxBottom - screenTop) / boxHeight * 100) + "%";
            results.push(this.id + "-" + percent);
            $(this).html(percent);
        }
    });
    
    $("#data").html(results.join(" | "));
    
}

$(function () {
    
    listVisibleBoxes();
    
    $(window).on("scroll", function() {
        listVisibleBoxes();
    });
    
});