我在 SPA 中的一个布局中有导航栏、过滤器和集合 - 完全按照该顺序排列。导航栏、过滤器和集合标题在滚动时必须保持在顶部,只有集合项必须是可滚动的。我设法使整个集合可滚动,但这并不是我想要的。
<div class="navbar-fixed">
<nav>...</nav>
</div>
<div class="row">...this is filter...</div>
<div id="collection-wrapper">
<ul class="collection">
<li class="collection-item"></li> <!-- serves as header -->
<li class="collection-item"></li> <!-- shows data -->
</ul>
</div>
在#collection-wrapper 上使用完美滚动条:https://github.com/noraesae/perfect-scrollbar
最佳答案
如果您将 collection
列表的 max-height
设置为允许列表滚动的特定值。将第一个 collection-item
的 position
设置为 fixed
将防止该元素与列表的其余部分一起滚动。
ul.collection {
max-height: 100px;
overflow: scroll;
list-style-type: none; /* not sure if you need this. Hides bullet list dots */
}
li.collection-item:first-child {
background-color: white; /* should be the same as the background color behind the list */
position: fixed;
}
关于css - 如何使集合标题保持在顶部并使集合项可滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42267664/