I am facing a dilemma with the following code:
#points{
width:25%;
background:#2a2a2a;
height:20px;
color:white;
z-index:2;
position:absolute;
}
#areas{
position:absolute;
color:white;
border-right:2px solid black;
height:120%;
}<div class="container" style="width:100%">
<div class="scale" style="width:100%; position:relative;">
<div id="points" style="left:0; ">0</div>
<div id="points" style="left:25%;">25</div>
<div id="points" style="left:50%;">50</div>
<div id="points" style=" left:75%;">75</div>
<div id="points" style=" left:100%;">100</div>
<div id="points" style=" left:125%;">125</div>
<div id="points" style=" left:150%;">150</div>
</div>;
<div class="area" style="width:100%; background:orange;">
<div id="areas" style="left:0;"></div>;
<div id="areas" style="left:25%;"></div>
<div id="areas" style="left:50%;"></div>
<div id="areas" style="left:75%;"></div>
<div id="areas" style="left:100%;"></div>
<div id="areas" style="left:125%;"></div>
<div id="areas" style="left:150%;"></div>
<div id="areas" style="left:175%;"></div>
</div>
</div>My goal is to only scroll the area div when scrolling up or down, without hiding the scale div from the container. I tried using position: fixed for the scale div, but it didn't align properly with the scroll, causing only the 0 25 50 75 points to display. Each scale point should correspond to its respective areas div tag and display all div tags 0, 25, 50, ... 150 along with their corresponding areas div tags.
Is there an alternative method to achieve this without using position: fixed?
View the working model on JSFiddle with postion: absolute, noting that the points divs are hidden from the container.
For comparison, view another version on JSFiddle with positon: fixed where the left side div tags are not visible.