Question

我有这段代码：

＆＃13;

#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%;
}

＆＃13;

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

滚动到顶部和底部时，我只想滚动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标签不可见。

Answer 1

你想要那样的东西吗？

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

1）id属性必须是唯一的。这就是为什么在JavaScript中我们有getElementById和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');
});

Answer 2

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

滚动特定的div标签

2 个答案: