JSFiddle - React, Tailwind, and code Playground

by wmmead

HTML

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>

CSS

#box1, #box2, #box3, #box4, #box5, #box6 {
    width: 100px;
    height: 100px;
    background: orange;
    margin:100px auto;
}
#box6 {
    margin-bottom:600px;
}

JavaScript

var box1Top = $('#box1').offset().top;
var box2Top = $('#box2').offset().top;
var box3Top = $('#box3').offset().top;
var box4Top = $('#box4').offset().top;
var box5Top = $('#box5').offset().top;
var box6Top = $('#box6').offset().top;

$(window).scroll(function () {
    if ((box1Top - $(window).scrollTop()) < 20) {
        $('#box1').stop().fadeTo(100, 0);
    } else {
        $('#box1').stop().fadeTo('fast', 1);
    }
    
    if ((box2Top - $(window).scrollTop()) < 20) {
        $('#box2').stop().fadeTo(100, 0);
    } else {
        $('#box2').stop().fadeTo('fast', 1);
    }
    
    if ((box3Top - $(window).scrollTop()) < 20) {
        $('#box3').stop().fadeTo(100, 0);
    } else {
        $('#box3').stop().fadeTo('fast', 1);
    }
    
    if ((box4Top - $(window).scrollTop()) < 20) {
        $('#box4').stop().fadeTo(100, 0);
    } else {
        $('#box4').stop().fadeTo('fast', 1);
    }
    
    if ((box5Top - $(window).scrollTop()) < 20) {
        $('#box5').stop().fadeTo(100, 0);
    } else {
        $('#box5').stop().fadeTo('fast', 1);
    }
    if ((box6Top - $(window).scrollTop()) < 20) {
        $('#box6').stop().fadeTo(100, 0);
    } else {
        $('#box6').stop().fadeTo('fast', 1);
    }
});