JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div></div>
<div></div>
<div></div>

CSS

html, body {height:100%; min-height:100%; margin:0;}
div {height:60%; background:pink; margin:20px; opacity:0.3;}
div.inview {opacity:1}

JavaScript

function testInView($el){
    var wTop = $(window).scrollTop();
    var wBot = wTop + $(window).height();
    var eTop = $el.offset().top;
    var eBot = eTop + $el.height();
    return ((eBot <= wBot) && (eTop >= wTop));
}
function setInView(){
    $("div").each(function(){
        var $zis = $(this);
        $zis.removeClass("inview");
        if(testInView($zis)){
           $zis.addClass("inview");   
        }
    });
}
$(document).scroll(function(){
    setInView();
});
$(document).resize(function(){
    setInView();
});
$(document).ready(function(){
    setInView();
});