JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" style="width:100%">
    <div id="scale" style="width:100%; position:fixed;">
        <div class="points" style="left:0; ">0</div>
        <div class="points" style="left:25%;">25</div>
        <div class="points" style="left:50%;">50</div>
        <div class="points" style=" left:75%;">75</div>
        <div class="points" style=" left:100%;">100</div>
        <div class="points" style=" left:125%;">125</div>
        <div class="points" style=" left:150%;">150</div>
    </div>

    <div id="area" style="width:100%; background:orange;">
        <div class="areas" style="left:0;"></div>
        <div class="areas" style="left:25%;"></div>
        <div class="areas" style="left:50%;"></div>
        <div class="areas" style="left:75%;"></div>
        <div class="areas" style="left:100%;"></div>
        <div class="areas" style="left:125%;"></div>
        <div class="areas" style="left:150%;"></div>
        <div class="areas" style="left:175%;"></div>
    </div>
</div>

CSS

.points{
width:25%;
background:#2a2a2a; 
height:20px; 
color:white; 
z-index:2;
position:absolute;
}
#scale
{
    top:0px;
    left:0px;
    z-index:2;
}
.areas{
position:absolute;
color:white; 
border-right:2px solid black; 
height:120%;
}

JavaScript

$(window).scroll(function(){
    $('#scale').css('left','-'+$(window).scrollLeft()+'px');
});