如何仅用纯CSS实现右侧侧边栏sticky定位、左侧div可滚动效果

完全可以通过纯CSS实现该布局，无需依赖任何JavaScript代码。

• 布局采用flex两栏结构，左侧内容区自适应宽度承载可滚动内容，右侧侧边栏设置position: sticky实现滚动时的固定效果。
• position: sticky生效必须满足三个前置条件，缺一则会失效：
  • 必须给元素指定至少一个方向的定位偏移值（top/right/bottom/left）
  • 元素的任意祖先节点不能设置overflow: hidden/overflow: auto/overflow: scroll属性，除非该祖先节点本身就是触发sticky定位的滚动容器
  • sticky元素的父容器高度必须大于sticky元素自身高度，否则元素会随父容器一同滚出视口

HTML结构 #

<div class="two-column-wrap">
  <!-- 左侧可滚动内容区 -->
  <div class="left-scroll-area">
    <div class="content-block">内容区块 1</div>
    <div class="content-block">内容区块 2</div>
    <div class="content-block">内容区块 3</div>
    <div class="content-block">内容区块 4</div>
    <div class="content-block">内容区块 5</div>
  </div>
  <!-- 右侧粘性侧边栏 -->
  <div class="right-sticky-bar">
    <h3>侧边栏菜单</h3>
    <ul>
      <li>菜单项1</li>
      <li>菜单项2</li>
      <li>菜单项3</li>
      <li>菜单项4</li>
    </ul>
  </div>
</div>

CSS样式 #

/* 基础重置，消除浏览器默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.two-column-wrap {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  /* 注意：外层容器不要设置overflow相关属性，避免破坏sticky定位上下文 */
}

.left-scroll-area {
  flex: 1;
  min-width: 0; /* 解决flex子项内容溢出撑破布局的问题 */
}

.content-block {
  height: 500px;
  margin-bottom: 20px;
  background: #f5f5f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.right-sticky-bar {
  width: 280px;
  flex-shrink: 0; /* 禁止侧边栏被flex布局压缩宽度 */
  height: fit-content; /* 关键：侧边栏高度适配自身内容，不能设置100%高度 */
  position: sticky;
  top: 24px; /* 滚动到距离视口顶部24px位置时触发粘性固定 */
  padding: 20px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.right-sticky-bar h3 {
  margin-bottom: 16px;
}

.right-sticky-bar li {
  list-style: none;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

• 如果侧边栏没有粘性效果，优先检查是否给侧边栏设置了height: 100%，该属性会导致侧边栏和父容器等高，sticky定位不会触发
• 如果滚动条是挂载在内层容器而非浏览器视口，需要确认sticky元素的所有祖先节点没有设置会截断滚动上下文的overflow属性
• 如果需要左侧区域自身独立滚动（而非跟随页面整体滚动），只需要给.left-scroll-area设置固定高度+overflow-y: auto即可，侧边栏会自动对齐最近的滚动祖先作为定位参考

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