JSFiddle - React, Tailwind, and code Playground

by nate

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(percentageSeen());
    $vis.text(percentageSeen() + '%');
});

function percentageSeen () {
    var viewportHeight = $(window).height(),
        scrollTop = $win.scrollTop(),
        elementOffsetTop = $element.offset().top,
        elementHeight = $element.height();
    
    
    if (elementOffsetTop > (scrollTop + viewportHeight)) {
        return 0;
    } else if ((elementOffsetTop + elementHeight) < scrollTop) {
        return 100;
    } else {
        var distance = (scrollTop + viewportHeight) - elementOffsetTop;
        var percentage = distance / ((viewportHeight + elementHeight) / 100);
        percentage = Math.round(percentage);
        return percentage;
    }
}

$win.trigger('scroll');