JSFiddle - React, Tailwind, and code Playground

by doug65536

HTML

<img id="img1" src="http://placehold.it/1x1/ff4040&amp;text=Image1"/>
<img id="img2" src="http://placehold.it/1x1/40ff40&amp;text=Image2"/>
<img id="img3" src="http://placehold.it/1x1/4040FF&amp;text=Image3"/>

CSS

html, body {
    margin: 0px;
    padding: 0px;
    
}
#img1 {
    position: relative;
    z-index: 10;
}
#img2 {
    position: fixed;
    top: 0px;
    left: 0px;
}
#img3 {
    position: absolute;
}

JavaScript

$(function() {
    var winw = $(window).width(),
        winh = $(window).height(),
        img = [
            $('#img1'),
            $('#img2'),
            $('#img3')
        ];
    $.each(img, function(i) {
        img[i].attr('src', img[i].attr('src').replace('1x1', winw + 'x' + winh));
    });
    img[1].css('top', '0px');
    img[2].css('top', winh * 2);
    
    var img2Fixed = true;
    $(window).on('scroll', function() {
        var ofs = $(window).scrollTop();
        if (ofs > winh && img2Fixed) {
            img2Fixed = false;
            img[1].css({position: 'absolute', top: winh + 'px'});
        } else if (ofs <= winh && !img2Fixed) {
            img2Fixed = true;
            img[1].css({position: 'fixed', top: '0px'});
        }
    });
});