JSFiddle - React, Tailwind, and code Playground

by Yurii Shpylovyi

HTML

<div class="wrapper">
  <div class="test red"></div>
  <div class="test blue"></div>
  <div class="test red"></div>
  <div class="test blue"></div>
  <div class="test red"></div>
  <div class="test blue"></div>
  <div class="test red"></div>
  <div class="test blue"></div>
  <div class="test red"></div>
  <div class="test blue"></div>
  <div class="test red"></div>
  <div class="test blue"></div>
  <div class="test red"></div>
  <div class="test blue"></div>
</div>

CSS

.test {
  width: 300px;
  height: 400px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

JavaScript

$(document).ready(function() { //<<====== wont work without this
  /*var windowHeight = $(window).height();
  $(window).scroll(function() {
    console.log();

  });*/
  var position = $(window).scrollTop(); 

// should start at 0

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if(scroll > position) {
        console.log('scrollDown');
        //$('div').text('Scrolling Down Scripts');
    } else {
         console.log('scrollUp');
         //$('div').text('Scrolling Up Scripts');
    }
    position = scroll;
});
});