JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div id="background-images" class="background-images">
        <div class="test"></div>
    </div>
</div>

CSS

#background-images{
    height: 4000px;
}
.container{
    border: 1px solid red;
    height: 400px;
    overflow: auto;
}
.test{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 600px;
    height: 600px;
}

.test img {
    width: 600px;
    height: 600px;
}

JavaScript

var $container = $(".container");
var $bgImage = $(".test");

$container.scroll(function(event) {
	var position = $container.scrollTop();
	setBgImage(position);
});

// preload the given total amount of iamges
function create(totalImages) {
	for (var i = 0; i < totalImages; i++) {
        var img = $('<img/>')
        img[0].src = getImgUrl(i);
        $bgImage.append(img)
    }
    setBgImage(0)
}

create(37);

function setBgImage(position){
	var imageNum;
	var lineCount = 0;
	
    imageNum = parseInt(position  / 100);

	console.log("IMG: " + imageNum + ", Position: " + position);
	
    $bgImage.find("img").hide().eq(imageNum).show()
}


function getImgUrl(num){
    return "http://placehold.it/200x200/&text=" + num;  
}