JSFiddle - React, Tailwind, and code Playground

by sinju

HTML

<div id="d1">One</div>
<div id="d2">Two</div>
<div id="d3">Three</div>
<div id="d4">Four</div>
<div id="d5">Five</div>

CSS

#d1, #d2, #d3, #d4, #d5{ 
    height:500px; width:200px; display: block;
    opacity: 0;
}

JavaScript

$(window).scroll(function() {
    $("div").each( function() {
        if( $(window).scrollTop() > $(this).offset().top - 100 ) {
            $(this).css('opacity',1);
        } else {
            $(this).css('opacity',0);
        }
    }); 
});