JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="red" class="background"></div>
    <div id="blue" class="background"></div>
    <div id="green" class="background"></div>
</div>

CSS

html, body, #red, #green, #blue { height: 100%}

#container { height: 300%}

#red, #green, #blue { 
    position: fixed; 
    top: 0; 
    width: 100%;
}

#red { background:red; z-index: 5}
#blue { background:blue; z-index: 4}
#green { background:green; z-index: 3}

JavaScript

var target = $('div.background');
var targetHeight = target.height();
var containerHeight = $('#container').outerHeight();

var maxScroll = containerHeight - targetHeight;
var scrollRange = maxScroll/(target.length-1);

$(document).scroll(function(e){
    var scrollY = $(window).scrollTop();
    var scrollPercent = (scrollRange - scrollY%scrollRange)/scrollRange;
    var divIndex = Math.floor(scrollY/scrollRange);

    target.has(':lt(' + divIndex + ')').css('opacity', 0);
    target.eq(divIndex).css('opacity', scrollPercent);
    target.has(':gt(' + divIndex + ')').css('opacity', 1);
});