css - 如何使集合标题保持在顶部并使集合项可滚动？

Question

我在 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

Answer 1

如果您将 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;
}