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 = 1;
    var lastScrollTop = 0;
    var totalImages = 4;
    var dontHandle = false;
    $("#home").scroll(function () {
        if (dontHandle) return; // Debounce this function.
        dontHandle = true;
        
        var scrollTop = $(this).scrollTop();
        (scrollTop > lastScrollTop) ? numberofscroll++ : numberofscroll--;
        
        if (numberofscroll > totalImages) numberofscroll = totalImages;
        else if (numberofscroll < 1) numberofscroll = 1;
        
        change_background(numberofscroll);
		
        lastScrollTop = scrollTop;
        window.setTimeout(function() {
            dontHandle = false;
        }, 400); // Debounce!--let this handler run once every 400 milliseconds.
    });

    function change_background(num) {
        $("#home").css("backgroundImage", "url('http://coverjunction.s3.amazonaws.com/manual/low/colorful" + num + ".jpg')");
    };
});