JSFiddle - React, Tailwind, and code Playground

HTML

<div id="visible"></div>

<div id="element"></div>

CSS

body {
    padding: 400px 200px;
    height: 1200px;
}

#visible {
    padding: 5px;
    position: fixed;
    top: 0;
    left: 0;
}

#element {
    background-color: red;
    height: 300px;
    width: 200px;
}

JavaScript

var $element = $('#element');
var $win = $(window);
var $vis = $('#visible');

$win.on('scroll', function () {
    console.log(percentageVisible());
    $vis.text(percentageVisible() + '%');
});

function percentageVisible () {
    var viewportHeight = $(window).height(),
        scrollTop = $win.scrollTop(),
        elementOffsetTop = $element.offset().top,
        elementHeight = $element.height();
    
    
    if (
        (elementOffsetTop + elementHeight) < scrollTop ||
        elementOffsetTop > (scrollTop + viewportHeight)
    ) {
        // If it's not visible at all, return 0
        return 0;
    } /*else if (
        elementOffsetTop > scrollTop &&
        (elementOffsetTop + elementHeight) < (scrollTop + viewportHeight)
    ) {
        // If it's totally visible, return 100
        return 100;
    }*/ else {
        
        var topNotVisible = scrollTop - elementOffsetTop;
        var bottomNotVisible = (elementOffsetTop + elementHeight) - (scrollTop + viewportHeight);
        
        topNotVisible = (topNotVisible < 0) ? 0 : topNotVisible;
        bottomNotVisible = (bottomNotVisible < 0) ? 0 : bottomNotVisible;
        
        var visible = elementOffsetTop - elementHeight - (topNotVisible + bottomNotVisible);
        var percentage = visible / (elementHeight / 100);
        percentage = Math.round(percentage);
        
        return percentage;
    }
}

$win.trigger('scroll');