JSFiddle - React, Tailwind, and code Playground

by guest271314

HTML

<div class="container">
    <div id="background-images" class="background-images">
        <div class="test"></div>
    </div>
</div>
<div id="imgs"></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;
}

#imgs {
    display:none;
}

JavaScript

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

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

    // preload the given total amount of iamges
    function preload(totalImages) {
        for (var i = 0; i < totalImages; i++) {
            $('<img/>', {
                "src": getImgUrl(i)
            })
                .appendTo("#imgs");

        }
    }

    preload(36);

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

        imageNum = parseInt(position / 100);

        console.log("IMG: " + imageNum + ", Position: " + position, $("#imgs img[src$=" + imageNum + "]"));

        // /imgObj.src = getImgUrl(imageNum);
        $bgImage.css("background-image", "url('" + $("#imgs img[src$=" + imageNum + "]").attr("src") + "')");
    }


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