三栏布局问题：左侧Sticky栏失效+中间内容覆盖固定图片

一、修复左侧Sticky栏粘性失效问题 #

• 确保左侧栏的父容器未设置overflow: hidden，这是sticky属性失效的高频诱因
• 给左侧粘性元素设置position: sticky + top: 0（或自定义偏移值），同时将高度设为100vh（而非100%，100vh基于视口高度，能保证元素拥有足够高度触发粘性效果）
• 示例CSS：

.left-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  /* 自定义样式：宽度、背景色、内边距等 */
}

二、实现中间栏视差效果并修正内容位置 #

放弃直接用fixed定位img标签（会脱离文档流导致内容重叠，还会干扰其他栏布局），改用背景图视差方案，既满足需求又不破坏整体布局：

1. 给中间栏顶部容器设置背景图并启用视差：

.main-top-banner {
  height: 500px; /* 自定义图片显示高度 */
  background-image: url('你的图片路径');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* 核心属性：实现视差滚动 */
}

2. .inner-main直接放在该容器下方，自然不会与图片重叠，无需设置top偏移，完全不影响左侧sticky栏的滚动行为

如果必须使用img标签实现视差：

• 给中间栏容器设置position: relative，img设置position: fixed + width: 100% + height: 500px（与容器高度一致）
• 给.inner-main设置margin-top: 500px（等于图片高度），同时确保中间栏容器高度也为500px，内容会被推到图片下方，滚动时图片固定、内容覆盖形成视差

.main-container {
  position: relative;
  height: 500px; /* 与图片高度匹配 */
}
.main-fixed-img {
  position: fixed;
  top: 0;
  left: 200px; /* 根据左侧栏宽度调整偏移 */
  width: calc(100% - 400px); /* 减去左右栏总宽度 */
  height: 500px;
  object-fit: cover;
}
.inner-main {
  margin-top: 500px;
  /* 自定义内容样式 */
}

完整三栏布局示例代码 #

<div class="layout-wrapper">
  <aside class="left-sidebar">左侧Sticky栏内容</aside>
  <main class="main-content">
    <div class="main-top-banner"></div>
    <div class="inner-main">
      <!-- 填充足够多内容用于滚动测试 -->
      <p>中间栏内容...</p>
      <p>中间栏内容...</p>
      <p>中间栏内容...</p>
      <!-- 重复内容直到页面可滚动 -->
    </div>
  </main>
  <aside class="right-sidebar">右侧静态栏内容</aside>
</div>

.layout-wrapper {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 自定义三栏宽度 */
  gap: 20px;
}

.left-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: #f0f0f0;
  padding: 20px;
}

.main-top-banner {
  height: 500px;
  background-image: url('你的图片路径');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.inner-main {
  padding: 20px;
  background: #fff;
}

.right-sidebar {
  background: #f0f0f0;
  padding: 20px;
}

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