滚动特定的div标签

时间:2015-05-07 10:52:14

标签: html css

我有这段代码:



#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>
&#13;
&#13;
&#13;

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

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

没有positon: fixed还有其他办法吗?

postion: absolute合作。但是points div在容器中是隐藏的。

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

2 个答案:

答案 0 :(得分:10)

你想要那样的东西吗?

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

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

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

答案 1 :(得分:1)

您可以将.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper { overflow-x: hidden !important; } .container隐藏到overflow-y&#39; .area进行滚动。因此,容器会沿x而不是y滚动overflow-y.scale,但.area会在.area内滚动,为您提供效果。