我有这段代码:
#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;
滚动到顶部和底部时,我只想滚动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标签不可见。
答案 0 :(得分:10)
你想要那样的东西吗?
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');
});
答案 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
内滚动,为您提供效果。