滚动特定的div标签

Question

我有这个代码:

#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>

滚动到顶部和底部时,我只想滚动areadiv; 我不希望scalediv在滚动时从容器中隐藏.

我试着用position: fixed了scaleDIV,但它并没有与左,这种情况下只显示滚动正确地安装0 25 50 75,但每个刻度点对应区域div标签,以便显示所有div标签0,25,50,.. 150与这些对应的areasdiv标签

没有其他方法可以做到positon: fixed吗？

工作小提琴:绝对.但是pointsdiv对容器是隐藏的.

位置:固定.左侧div标签不可见.

Answer 1

你想要那样的东西吗？

https://jsfiddle.net/qk37kson/ (已编辑:添加了一点JQuery以使标题水平移动)

1)id属性必须是唯一的.这就是我们拥有getElementById和使用JavaScript的原因getElementsByClassName.

来自W3Schools:

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

id属性指定HTML元素的唯一ID.

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

class属性指定元素的一个或多个类名.

2)改变

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

至

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

3)然后,在你的CSS中添加:

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

编辑:

4)最后,添加一些JQuery:

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