JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:2000px">
    
<div id="img1">img1</div>
<div id="cap1">cap1</div>
<div id="img2">img2</div>
<div id="cap2">cap2</div>
<div id="img3">img3</div>
<div id="cap3">cap3</div>
    
</div>

CSS

#img1 {
    background-color: #ccc;
    position: absolute;
    top: 200px;
    left: 0px;
    z-index: -1;
    width: 100%;
    text-align: center;
}
#cap1 {
    background-color: #ccc;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
}
#img2 {
    background-color: #666;
    position: absolute;
    top: 400px;
    left: 0px;
    width: 100%;
    z-index: -1;
    text-align: center;
}
#cap2 {
    display: none;
    background-color: #666;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
}
#img3 {
    background-color: #999;
    position: absolute;
    top: 600px;
    left: 0px;
    width: 100%;
    z-index: -1;
    text-align: center;
}
#cap3 {
    display: none;
    background-color: #999;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
}

JavaScript

$(document).ready(function () {
    var topOfimg1 = $("#img1").offset().top;
    var topOfimg2 = $("#img2").offset().top;
    var topOfimg3 = $("#img3").offset().top;
    $(window).scroll(function () {
        if ($(window).scrollTop() > topOfimg1) {
            $("#cap1").hide();
            $("#cap2").show();
        }  
        if ($(window).scrollTop() > topOfimg2) {
            $("#cap2").hide();
            $("#cap3").show();
        } 
        if ($(window).scrollTop() < topOfimg2) {
            $("#cap2").show();
            $("#cap3").hide();
        } 
        if ($(window).scrollTop() < topOfimg1) {
            $("#cap1").show();
            $("#cap2").hide();
        }
    });
});