JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header header-1" data-visible-range="0-100">Header 1</div>
<div class="header header-2" data-visible-range="101-500">Header 2</div>
<div class="header header-3" data-visible-range="501-">Header 3</div>
<div class="body">BODY</div>

CSS

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
}
.header-1 {
    background-color: yellow;
    display: block;
}
.header-2 {
    background-color: red;
}
.header-3 {
    background-color: green;
}
.body {
    padding-top: 50px;
    height: 2000px;   
}

JavaScript

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    var headerToDisplay = false;
    $('.header[data-visible-range]').each(function() {
        var range = $(this).data('visible-range').split('-');
        range[0] = range[0] ? parseInt(range[0], 10) : 0;
        range[1] = range[1] ? parseInt(range[1], 10) : $(document).height();
        if(scrollTop >= range[0] && scrollTop <= range[1]) {
            headerToDisplay = $(this);
            return false;
        }
    });
    if(headerToDisplay && !headerToDisplay.is(':visible')) {
        $('.header[data-visible-range]').hide();
        headerToDisplay.show();
    }
});