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

Question

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

我想要一个 ul，其中第一个元素是固定的，因为它是一个搜索框，并使其他元素，加载了 ng-repeat，可滚动。

我找到了一个解决方案，但它不是用户体验好...

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