我想知道是否有人找到了解决方案?
我正在寻找一种将元素附加到滚动容器顶部的解决方案
HTML:
<div class="container">
<div class="header">title</div>
<div class="element">......</div>
... (about 10-20 elements) ...
<div class="element">......</div>
</div>
所有“元素”都有position:relative
,
该容器具有以下 CSS:
.container {
position:relative;
width:200px;
height:400px;
overflow-y:scroll;
}
我希望标题保留在容器的顶部,独立于其滚动位置和在下面滚动的元素。
到目前为止的CSS:
.header {
position:absolute; /* scrolling out of view :-( */
z-index:2;
background-color:#fff;
}
.element{
position: relative;
}
所有元素都是块元素,我无法将标题移到容器之外。
jquery 此时没有选择。
我认为你的解决方案通过position:sticky
。好像是这样的position:fixed
但尊重与父母的相对地位。
不幸的是,这是一个实验性功能,并且仅在 Chromium 中受支持。您可以在中查看更多详细信息这个测试页 http://html5-demos.appspot.com/static/css/sticky.html.
我想到的纯 CSS 解决方案是对标记进行一些更改。您可以仅为“元素”设置容器,如下所示:
<div class="cont_elements">
<div class="element">......</div>
.....
</div>
并将溢出物倒入该内容器中。现在,您的标题粘在顶部。
这是一个工作演示 http://jsfiddle.net/S65wj/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)