html - 滚动特定的 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>

在滚动到顶部和底部时，我只想滚动 area div；我不希望 scale div 在滚动时从容器中隐藏。

我尝试对 scale div 使用 position: fixed，但它不适合左侧的滚动条，这种情况下只显示 0 25 50 75，但每个比例点都对应于区域 div 标签，因此显示所有 div 标签 0,25,50,.. 150 以及这些对应的 areas div标签

没有positon: fixed还有其他方法吗？

使用 postion: absolute 工作.但是 points div 在容器中是隐藏的。

position: fixed .左侧的 div 标签不可见。

Answer 1

你想要这样的东西吗？

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

1) id 属性必须是唯一的。这就是为什么在 JavaScript 中我们有 getElementById 和 getElementsByClassName。

来自 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)改变

 <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');
});