不知有没有人找到解决方法?
我正在寻找一个解决方案来附加一个元素到顶部的滚动容器
于飞:
<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在这一点上不是选项。
9条答案
按热度按时间ewm0tg9j1#
我认为你的解决方案通过了
position:sticky
。看起来像position:fixed
,但尊重相对于他的父母的位置。遗憾的是,这是一个实验性的功能,并且仅在Chromium中支持。您可以在this test page中查看更多详细信息。
我想到的纯css解决方案是对标记做一点修改。你可以为“元素”设置一个容器,如下所示:
然后把溢出的水倒入这个内胆。现在,你的头粘在上面。
是的。
kpbwa7wx2#
以下是我使用
position: sticky
(因此不幸没有IE)提出的解决方案:https://codepen.io/waterplea/pen/JjjMXzR
我们的想法是在滚动容器的顶部放置一个0高度的粘性容器,这样它就可以粘在上面,但不会推动下面的任何内容,然后将您的内容完全放置在其中。这样您就有了宽度,但没有高度,所以您只能从顶部放置一些内容,就像我在示例中对按钮所做的那样。
EDIT:找到了一种方法,使其具有100%的高度,并且不使用float推送下面的内容。更新了codepen。由于Firefox中的此错误,不得不使用
calc(100% - 1px)
:https://bugzilla.mozilla.org/show_bug.cgi?id=1612561tjjdgumg3#
这种情况下的解决方案是将标题弹出到滚动元素之外:
尽管如果可能的话,您可能应该有更好的语义元素(这里只是猜测):
tf7tbtn24#
jQueryUI添加了一个position()实用程序方法,这将使您的工作更加轻松。
绝对帮了我。
hk8txs485#
使用容器 Package 要滚动的元素:
height: 100%; overflow: scroll
.将滚动容器和标题放在另一个高度固定的容器中。
然后将
position: absolute
标头放入外部容器中。第一个
j2cgzkjk6#
最好的答案,你会发现这样一个解决方案是从这个链接How to fixed scroll div after certain height and stop after reach other div?我希望这节省一些人谷歌的时间
第一个
l7mqbcuq7#
第一个
qij5mzcb8#
这就是我在一个可滚动的div中实现静态位置div的方法:
hgc7kmma9#
用粘性的。绝对管用!
父容器:
子容器: