JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list-unstyled">
  <li class="show">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

CSS

.list-unstyled {
  list-style-type: none;
  height: 100%;
}

ul li {
  height: 150px;
  line-height: 150px;
  background-color: tomato;
  margin: 10px;
  text-align: center;
  font-size: 4em;
  color: white;
  font-family: sans-serif;
  transition: opacity .2s ease;
  opacity: 0;
}

ul li.show {
  opacity: 1;
}

JavaScript

var count = 1;

var throttle = 200; // milliseconds
var time = -1;

$(document).ready(function() {
  $(window).on("scroll", function(e) {
    var now = Date.now(); // in ms

    if (time !== -1 && now - time < throttle)
      return;
    time = now;

    // On each scroll, change the item that is shown

    var $li = $('li');
    $li.eq(count).addClass("show").siblings().removeClass("show");
    count++;
    if (count == 6) {
      count = 0;
    }
  });
});