Fatal编程技术网
  • css/
  • Css 如何使集合标题保持在顶部，集合项可滚动？

Css 如何使集合标题保持在顶部，集合项可滚动？

css meteor

Css 如何使集合标题保持在顶部，集合项可滚动？,css,meteor,materialize,Css,Meteor,Materialize,我有导航栏，过滤器和收集在我的一个布局在水疗中心-以下的确切顺序。滚动时导航栏、过滤器和集合标题必须保持在顶部，只有集合项才能滚动。我设法使整个收藏可以滚动，但这不是我想要的 <div class="navbar-fixed"> <nav>...</nav> </div> <div class="row">...this is filter...</div> <div id="collection-wrapper"

我有导航栏，过滤器和收集在我的一个布局在水疗中心-以下的确切顺序。滚动时导航栏、过滤器和集合标题必须保持在顶部，只有集合项才能滚动。我设法使整个收藏可以滚动，但这不是我想要的

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


...
…这是过滤器。。。

    

  • 

  •
如果将
集合
列表的
最大高度设置为允许列表滚动的特定值，则在#集合包装器上使用完美滚动条：
。将第一个
收集项目的
位置设置为
固定
将防止该项目与列表的其余部分一起滚动


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;
}



必须调整第一个集合项的宽度和顶部属性以使标题融入，但基本上就是这样。非常感谢。