JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

CSS

body {
    background:black;
}
html,body{
    overflow-x:hidden;
    overflow-y:auto;
    height:100%;
}
.block {
  display: block;
  width:100%;
  background-color:yellow;
  margin:350px 0px;
  height:50px;
    opacity: 1;
}

JavaScript

$(window).scroll(function () { 
           var st = $(this).scrollTop();
        $('.block').each(function(index) {
            var o = (($(this).offset().top - st) / 50);
            $(this).css({ 'opacity' : o });
            $(this).html('O: ' + o + ' P: ' + ($(this).offset().top - st));
        })
});