JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<div id="wrapper">
    <div id="target">scroll to initiate</div>
</div>

CSS

#wrapper { height: 1000px; }
#target { padding: 50px; background-color: red; position: absolute; top: 600px; left: 200px; }

JavaScript

$(window).scroll(function(e) {
    var y = $(document).scrollTop();
    var h = $(window).height();
    var t = $('#target');

    if(y + h < t.position().top) {
        t.html('not in viewport').css('background-color', 'red');
    } else if(y + h < t.position().top + t.outerHeight()) {
        t.html('partially in viewport').css('background-color', 'yellow');
    } else if(y > t.position().top + t.outerHeight()) {
        t.html('not in viewport').css('background-color', 'red');
    } else if(y > t.position().top) {
        t.html('partially in viewport').css('background-color', 'yellow');
    } else {
        t.html('in viewport').css('background-color', 'green');
    }
});