JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="empty" class="empty">EXPERIMENT</div>


<div id="test1" class="adiv a-pos1">TEST</div>

<div id="test2" class="adiv b-pos1">TEST</div>

<div id="test3" class="adiv c-pos1">TEST</div>



<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

CSS

.empty {height:600px;}

.adiv {}

.a-pos1 {background-color:#dedede;height:0px;transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;}
.a-pos2 {background-color:#dedede;height:300px;transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;}

.b-pos1 {background-color:#999;height:0px;transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;}
.b-pos2 {background-color:#999;height:300px;transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;}

.c-pos1 {background-color:#aaa;height:0px;transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;}
.c-pos2 {background-color:#aaa;height:300px;transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;}

JavaScript

function getscroll() {

var currentY = window.pageYOffset;

var div1 = document.getElementById("test1");
var div2 = document.getElementById("test2");
var div3 = document.getElementById("test3");


if (currentY > 100) {div1.className = "adiv a-pos2";}

else {div1.className = "adiv a-pos1";}


if (currentY > 300) {div2.className = "adiv b-pos2";}

else {div2.className = "adiv b-pos1";}


if (currentY > 500) {div3.className = "adiv c-pos2";}

else {div3.className = "adiv c-pos1";}


}

window.onscroll = getscroll;