如何实现双网格列表首个li粘性头部，其余li可滚动（支持横向滚动）

问题根源 #

你的代码未生效的核心原因：

• 没有为列表设置纵向滚动容器，position: sticky需要在有滚动溢出的父容器内才能触发粘性效果
• Grid布局的直接父元素未形成滚动上下文，导致sticky定位失效
• 缺少横向滚动的外层容器配置

实现方案 #

以下是满足你需求的完整代码，支持多独立Grid、每个Grid首个li粘性头部、横向滚动，且不使用table：

HTML 结构 #

<!-- 横向滚动容器，包裹所有Grid列表 -->
<div class="horizontal-scroll">
  <!-- 第一个Grid列表的纵向滚动容器 -->
  <div class="list-scroll-wrapper">
    <ul class="list">
      <li class="sticky-header">
        <span class="category">Category 1</span>
        <span class="name">Item Title 1</span> 
        <span class="price">40 EUR</span>
        <span class="url"><a href="url1">Link to Article</a></span>
      </li>   
      <li>
        <span class="category">Sub Item 1-1</span>
        <span class="name">Sub Title 1-1</span> 
        <span class="price">30 EUR</span>
        <span class="url"><a href="url1-1">Link to Sub Article</a></span>
      </li>
      <li>
        <span class="category">Sub Item 1-2</span>
        <span class="name">Sub Title 1-2</span> 
        <span class="price">35 EUR</span>
        <span class="url"><a href="url1-2">Link to Sub Article</a></span>
      </li>
    </ul>
  </div>

  <!-- 第二个Grid列表的纵向滚动容器 -->
  <div class="list-scroll-wrapper">
    <ul class="list">
      <li class="sticky-header">
        <span class="category">Category 2</span>
        <span class="name">Item Title 2</span> 
        <span class="price">55 EUR</span>
        <span class="url"><a href="url2">Link to Article</a></span>
      </li>   
      <li>
        <span class="category">Sub Item 2-1</span>
        <span class="name">Sub Title 2-1</span> 
        <span class="price">45 EUR</span>
        <span class="url"><a href="url2-1">Link to Sub Article</a></span>
      </li>
    </ul>
  </div>
</div>

CSS 样式 #

/* 横向滚动容器：包裹所有Grid列表，实现横向滚动 */
.horizontal-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 1rem 0;
  width: 100%;
}

/* 单个Grid的纵向滚动容器：设置固定高度，形成纵向滚动上下文 */
.list-scroll-wrapper {
  height: 400px; /* 自定义高度，根据需求调整 */
  overflow-y: auto;
  flex-shrink: 0; /* 防止Grid容器被压缩 */
}

.list {
  display: grid;
  grid-template-columns: 180px; /* 单列Grid，每个li占满列宽 */
  width: 180px;
  margin: 0;
  padding: 0;
  border: 1px solid #000;
  list-style-type: none;
}

.list li {
  border: 1px solid #000;
  box-sizing: border-box;
}

/* 粘性头部核心样式 */
.list .sticky-header {
  position: sticky;
  top: 0;
  background-color: #fff; /* 背景色覆盖下方内容，避免穿透 */
  z-index: 10;
}

.list li span {
  display: block;
  padding: 6px 9px;
  border: 1px solid #000;
}

.list li span.category {
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

关键细节说明 #

1. 滚动上下文分层：
   • 外层.horizontal-scroll负责横向滚动，使用flex布局让多个Grid并排，overflow-x: auto触发横向滚动
   • 每个Grid的.list-scroll-wrapper设置固定高度和overflow-y: auto，形成纵向滚动上下文，这是sticky生效的前提
2. 粘性头部优化：
   • 给粘性头部添加background-color和z-index，避免滚动时下方内容穿透显示
   • 使用.sticky-header类代替li:first-child，更灵活（如果后续需要调整粘性项位置，无需修改选择器）
3. Grid布局调整：
   • 每个Grid设置为单列（grid-template-columns: 180px），确保每个li垂直排列，符合列表滚动的预期
   • flex-shrink: 0保证每个Grid容器不会被压缩，保持固定宽度

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