JSFiddle - React, Tailwind, and code Playground

HTML

<section id="home">

	<div id="home1inner"></div>  
</section>

CSS

#home {
	
    position: relative;
    top:0px;
    height:500px;
    width: 100%;
    overflow-y:auto;
    background-image: url('http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #000000;
    margin-top: 40px;


}
#home1inner {
	height: 1000px;
	
}

JavaScript

$(document).ready(function(){
    var numberofscroll = 0;
    var lastScrollTop = 0;
	$("#home").scroll(function(){
        var st = $(this).scrollTop();
        (st > lastScrollTop) ? numberofscroll++ : numberofscroll--;
        console.log(numberofscroll);
        console.log(lastScrollTop);
        console.log(st);
        if (numberofscroll<2){
        	change_background2(numberofscroll);
        }
        else if (numberofscroll<3){
        	change_background3(numberofscroll);
        }
        else if (numberofscroll<4){
        	change_background4(numberofscroll);
        }
       
        lastScrollTop = st;
    });
    
    function change_background2(numberofscroll){
    var i; 
    for (i = 2; i <= 2; i++) {
        $("#home").css("background-image","url('http://coverjunction.s3.amazonaws.com/manual/low/colorful" + i + ".jpg')");
    }
}

	  function change_background3(numberofscroll){
    var i; 
    for (i = 3; i <= 3; i++) {
        $("#home").css("background-image","url('http://coverjunction.s3.amazonaws.com/manual/low/colorful" + i + ".jpg')");
    }
}

	function change_background4(numberofscroll){
    var i; 
    for (i = 4; i <= 4; i++) {
        $("#home").css("background-image","url('http://coverjunction.s3.amazonaws.com/manual/low/colorful" + i + ".jpg')");
    }
}
   
});