下拉菜单UL固定列表项：如何实现首个LI固定其余LI可滚动？

当然可以实现这个需求！而且我们可以通过更优雅的CSS方案来提升用户体验，替代你当前的方案。下面是具体的实现思路和代码示例：

核心实现思路 #

利用CSS的position: sticky属性让首个LI（搜索框）固定在列表顶部，同时给整个UL设置最大高度和垂直滚动，这样其余通过ng-repeat生成的LI就会在下方滚动，且不会遮挡固定的搜索框。

代码示例 #

HTML结构 #

<ul class="fixed-header-list">
  <li class="sticky-search">
    <!-- 你的搜索框代码 -->
    <input type="text" placeholder="搜索..." ng-model="searchKeyword">
  </li>
  <li ng-repeat="item in itemList | filter:searchKeyword">
    {{ item.name }}
  </li>
</ul>

CSS样式 #

.fixed-header-list {
  max-height: 400px; /* 根据你的需求设置列表最大高度 */
  overflow-y: auto;
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
}

.sticky-search {
  position: sticky;
  top: 0;
  background-color: #fff; /* 背景色要和列表容器一致，避免滚动时内容透出 */
  padding: 8px 12px;
  border-bottom: 1px solid #eee; /* 加个分割线，区分固定头部和滚动内容 */
  z-index: 10; /* 确保搜索框在滚动内容上方 */
}

/* 可选：给滚动的列表项添加内边距，优化排版 */
.fixed-header-list li:not(.sticky-search) {
  padding: 8px 12px;
  border-bottom: 1px solid #f5f5f5;
}

UX优化建议 #

• 添加视觉区分：给固定的搜索框底部加浅灰色分割线，或者轻微的阴影，让用户清晰感知这是固定的头部，不会随着内容滚动消失。
• 背景色填充：一定要给固定的搜索框设置和列表容器一致的背景色，否则滚动时下方的列表内容会透过搜索框显示出来，非常影响体验。
• 滚动流畅性：如果你的ng-repeat会渲染大量数据（比如上百条），建议考虑AngularJS的虚拟滚动方案，只渲染当前可视区域的列表项，避免大量DOM节点导致的滚动卡顿。
• 搜索框焦点保持：可以给搜索框添加自动聚焦逻辑，或者在滚动时如果用户没有点击其他区域，保持搜索框的可输入状态，提升搜索效率。

这个方案相比你之前的pre-scrollable2（复制dropdown-menu样式）会更简洁，且原生CSS的sticky属性在现代浏览器中兼容性很好，能提供更自然的滚动体验。

内容的提问来源于stack exchange，提问作者Julo Diaz