Как сделать заголовок коллекций на вершине и элементы коллекции прокручиваемы?

Question

У меня есть панель навигации, фильтр и коллекция в одном из моих макетов в SPA - следуя точно в этом порядке. Строка Nav, фильтр и сборщик должны оставаться на вершине при прокрутке, только элементы коллекции должны прокручиваться. Мне удалось сделать всю коллекцию прокручиваемой, но это не совсем то, что я хочу.

<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

Если вы установите max-height в collection списке конкретного значения, которое позволит список для прокрутки. Установка position первого collection-item на 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; 
}