我想知道有没有人找到解决方案?
我正在寻找一个解决方案来将一个元素附加到滚动容器的顶部
HTML:
<div class="container"> <div class="header">title</div> <div class="element">......</div> ... (about 10-20 elements) ... <div class="element">......</div> </div>
所有“元素”都有位置:相对,
容器具有以下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在这一点上是没有选择的。
解决方法
我认为你的解决方案通过了位置:粘性。似乎这样的立场:固定,但尊重与父母的相对位置。
不幸的是,这是一个实验性功能,仅在Chromium中支持。您可以在this test page中看到更多的细节。
我想到的纯粹的CSS解决方案就是改变了一些标记。您可以仅为“元素”设置容器:
<div class="cont_elements"> <div class="element">......</div> ..... </div>
并给这个内部容器溢出。现在,你的头贴在顶部。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。