コレクションヘッダーをトップに、コレクションアイテムをスクロール可能にするにはどうすればいいですか？

Question

SPAのレイアウトの1つにナビゲーションバー、フィルタ、コレクションがあります。スクロールするときには、ナビゲーションバー、フィルター、およびコレクションのヘッダーは一番上になければなりません。コレクションアイテムのみスクロール可能でなければなりません。私はコレクション全体をスクロール可能にすることができましたが、それは私が欲しいものではありません。

＃コレクションラッパーにパーフェクト・スクロールバーを使用して

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

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