JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

body {
    height: 6000px;
}

div {
    background: red;
    width: 250px;
    height: 250px;
    background: red;
    margin-top: 300px;
}

JavaScript

$(window).scroll(function() {
    var d = $("div"),
        offsetT = d.offset().top + d.outerHeight(),
        scrollT = $(document).scrollTop();
    
    if (offsetT <= scrollT) {
        d.stop(true).fadeOut(100);
    } else {
        d.stop(true).fadeIn(100);
    }
    /*
    d.css("opacity", function() {
        // Some arithmetic magic
    });
    */
});