Scroll a particular div tag

Question

I have this 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>

While scrolling to top and bottom, I would only like to scroll the area div; I don't want the scale div to hide from the container while scrolling.

I tried using position: fixed for the scale div, but it didn't fit correctly with the the scroll left, this case only display the 0 25 50 75, but each scale points are correspond to the area div tag so display the all div tag 0,25,50,.. 150 with these corresponding areas div tags

Is there any other way to do it without positon: fixed?

Working fiddle with postion: absolute. But the points divs are hidden from the container.

position: fixed. Left side div tags are not visible.

Answer 1

Do you want something like that ?

https://jsfiddle.net/qk37kson/ (Edited : added a little bit of JQuery to make the header move horizontally)

1) The id attribute has to be unique. That's why in JavaScript we have getElementById and getElementsByClassName.

From W3Schools :

http://www.w3schools.com/tags/att_global_id.asp

The id attribute specifies a unique id for an HTML element.

http://www.w3schools.com/tags/att_global_class.asp

The class attribute specifies one or more classnames for an element.

2) change

 <div class="scale" style="width:100%; position:relative;">

to

 <div id="scale" style="width:100%; position:fixed;">

3) then, in your CSS, add this :

#scale {
    top:0px;
    left:0px;
    z-index:2;
}

Edit :

4) Finally, add some JQuery :

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

Answer 2

You could keep .container's overflow-y to hidden and .area's overflow-y to scroll. Thereby the container would scroll .scale and .area along x but not y, but the .area will scroll along y within itself giving you your effect.