Fixed list item in dropdown menu UL - html

Question

Its possible to have an LI fixed at a position and make the rest of the LI scrollable?
I want to have a ul where the first item is fixed, since its a search box, and make the other items, that are loaded with ng-repeat, scrollable.
I came to a solution but it's not UX ok...
My html:
<ul ng-if="filter.isSearchListType && hasFilterValues(filter)" class="dropdown-menu">
<li class="individual-search">
<input type="search" ng-model="searchInputText" class="form-group filter-input" placeholder="Nombre o E-mail" />
<i ng-show="searchInputText" class="fa fa-remove clear-search-icon" aria-hidden="true" ng-click="searchInputText = ''; $event.stopPropagation()"></i>
<i class="fa fa-search search-icon" aria-hidden="true" ng-click="$event.stopPropagation()"></i>
</li>
<li>
<ul class="pre-scrollable2">
<li ng-repeat="filterValue in filter.values | searchInData:searchInputText">
<a href="#" ng-click="selectFilterValue(filter, filterValue.id)" ng-class="{ 'selected': isSelectedFilter(filter, filterValue.id) }">
{{filterValue.label}}
</a>
</li>
</ul>
</li>
</ul>
CSS pre-scrollable2 is kinda a copy of dropdown-menu:
.pre-scrollable2 {
max-height: 340px;
overflow-y: scroll;
/*list-style-type: none;*/
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
/*display: none;*/
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.pre-scrollable2 > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.pre-scrollable2 > li > a:hover,
.pre-scrollable2 > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}

Answer 1

In my experience you have to seperate the two lists and stack them on top of eachother to make them look like one list. then the top list set the position to fixed for the fixed search bar then the bottom set overflow to auto to get a scroll effect. create a navbar class set its width to whatever and the height to 100vh
<div class="navbar">
<ul ng-if="filter.isSearchListType && hasFilterValues(filter)" class="searchbar">
<li class="individual-search">
<input type="search" ng-model="searchInputText" class="form-group filter-input" placeholder="Nombre o E-mail" />
<i ng-show="searchInputText" class="fa fa-remove clear-search-icon" aria-hidden="true" ng-click="searchInputText = ''; $event.stopPropagation()"></i>
<i class="fa fa-search search-icon" aria-hidden="true" ng-click="$event.stopPropagation()"></i>
</li>
</ul>
<ul class="bottomlist">
<li ng-repeat="filterValue in filter.values | searchInData:searchInputText">
<a href="#" ng-click="selectFilterValue(filter, filterValue.id)" ng-class="{ 'selected': isSelectedFilter(filter, filterValue.id) }">
{{filterValue.label}}
</a>
</li>
</ul>
</div>
<style>
.navbar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
height: 100vh;
width: 20vw;
}
.searchbar {
postion: fixed;
top: 0;
}
.bottomlist {
overflow: auto;
postion: relative;
}
</style>