父容器固定高度下实现侧边栏position: sticky效果的问题

问题分析 #

你之前的实现失效是因为**position: sticky的工作机制依赖于最近的非overflow: hidden/scroll/auto的祖先元素**。当你给.wrapper设置overflow: scroll后，它成为了滚动容器，而.col-inner的粘性定位会相对于这个容器生效，但容器的max-height是400px，.col-inner高度仅300px，自然不会产生粘性滚动的效果。

实现方案 #

核心思路是：将滚动行为限制在侧边栏（.col-2）而非整个容器，同时让侧边栏高度与主栏保持一致，避免底部空白。

修改后的代码

CSS

.container {
  padding: 10px;
}

.header,
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: #e1e1e1;
}

.wrapper {
  display: flex;
  padding: 15px 0;
  align-items: flex-start; /* 确保两栏顶部对齐 */
}

.col-1 {
  flex: 1; /* 主栏占满剩余宽度 */
  margin-right: 10px;
}

.col-inner {
  background: purple;
  color: #fff;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  position: -webkit-sticky;
  top: 15px; /* 匹配wrapper的padding-top，保持布局间距 */
}

.col-2 {
  max-height: 300px; /* 与主栏高度一致，避免超出 */
  overflow-y: auto; /* 侧边栏仅垂直滚动 */
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  color: #fff;
  background: blue;
  margin-bottom: 10px;
}

HTML

<div class="container">
  <header class="header">Header</header>

  <div class="wrapper">
    <div class="col-1">
      <div class='col-inner'>Column 1</div>
    </div>
    <div class="col-2">
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>      
    </div>
  </div>

  <footer class="footer">Footer</footer>
</div>

关键调整说明 #

1. 滚动容器转移：移除.wrapper的overflow: scroll和max-height，将max-height和overflow-y: auto移到.col-2，让侧边栏独立滚动。
2. 粘性定位恢复：此时.col-inner的滚动祖先为视口，position: sticky可正常生效，滚动侧边栏时主栏保持置顶。
3. 高度对齐：.col-2的max-height设为与.col-inner相同的300px，确保侧边栏不会超出主栏高度，避免底部出现空白。
4. 布局细节：给.wrapper添加align-items: flex-start保证两栏顶部对齐，top: 15px匹配容器内边距，保持原布局的视觉间距。

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