下拉菜单UL中的固定列表项目

Question

是否可以将LI固定在某个位置并使其余的LI滚动？

我想让ul固定第一个项目，因为它是一个搜索框，并使其他装有ng-repeat的项目滚动。

我找到了一个解决方案，但不是UX好的...

我的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有点像下拉菜单的副本：

.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

以我的经验，您必须将两个列表分开，然后将它们堆叠在一起，使它们看起来像一个列表。 然后顶部列表将固定搜索栏的位置设置为固定，然后底部设置为自动溢出以获取滚动效果。 创建一个导航栏类，将其宽度设置为任意值并将高度设置为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>