设置position:sticky后侧边栏无法实现吸顶效果如何解决

问题根因 #

现有代码无法实现预期效果的核心问题有3个：

• Grid布局子项默认align-items: stretch，左右侧边栏高度会被拉伸到和父容器等高，position: sticky没有滚动触发的空间，看起来完全不生效。
• 右侧侧边栏当前使用position: absolute脱离文档流，不满足sticky定位的生效前提，且嵌套在中间内容容器内部，会跟着内容横向偏移，无法固定在右侧。
• 头部没有设置层级和吸顶逻辑，滚动时侧边栏会覆盖头部内容。

具体修改步骤 #

1. 调整CSS样式 #

替换原有样式中对应部分的代码：

/** Header Row Starts **/
.fs-header-row {
  background: #ffffff;
  box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.05);
  display: grid;
  /* 新增头部吸顶和层级 */
  position: sticky;
  top: 0;
  z-index: 30;
}
/** Header Row Ends **/

.main-fs-container {
  position: relative;
  background-color: lime;
  display: grid;
  grid-template-columns: 279px 1fr;
}
/** Left Sidebar Starts **/
.fs-sidebar-left {
  width: 279px;
  background-color: yellow;
  padding: 12px 10px 12px 15px;
  backdrop-filter: blur(50px);
  position: sticky;
  top: 0;
  /* 新增：取消grid默认高度拉伸，设置层级 */
  align-self: start;
  z-index: 10;
}
/** Left Sidebar Ends **/
/** Main Container Starts **/
.building-table-container {
  width: fit-content;
  position: relative;
}
.floor-stack-main {
  padding: 14px 14px 100px 30px;
  position: relative;
  /* 新增：占据grid第二列，允许横向滚动 */
  grid-column: 2;
  overflow-x: auto;
}

.floor-stack-main .building-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: #2b2b2b;
  margin-bottom: 10px;
}
/** Main Container Ends **/
/**right column starts**/
.unit-detail-right {
  /* 替换absolute为sticky */
  position: sticky;
  top: 0;
  right: 0;
  background-color: red;
  /* 新增：跨所有grid列、取消高度拉伸、设置高层级悬浮在内容上、靠右对齐 */
  grid-column: 1 / -1;
  align-self: start;
  z-index: 20;
  margin-left: auto;
  pointer-events: none;
}
.unit-detail-right .unit-detail-wrapper {
  width: 279px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(50px);
  padding: 13px 12px;
  pointer-events: auto;
}
/** right column ends **/

2. 调整HTML结构 #

将右侧栏.unit-detail-right从.floor-stack-main内部移出，作为.main-fs-container的直接子元素，和左侧栏、中间内容区同级，结构参考：

<div class="main-fs-container">
  <aside class="fs-sidebar-left">
    <!-- 左侧栏原有内容保持不变 -->
  </aside>
  <div class="floor-stack-main">
    <div class="buildings-column">
      <!-- 所有表格原有内容保持不变 -->
    </div>
  </div>
  <!-- 右侧栏移到此处，和前两个元素同级 -->
  <div class="unit-detail-right">
    <div class="unit-detail-wrapper">
      <h2>Right Sidebar,</h2>
      <h4>this needs to be sticky</h4>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto non possimus veniam laudantium molestiae numquam, quas facilis totam impedit, adipisci quibusdam perferendis beatae explicabo, quasi reprehenderit unde labore debitis eveniet?</p>
    </div>
  </div>
</div>

效果说明 #

• 左侧侧边栏高度随自身内容决定，滚动到顶部后自动吸顶，不会被拉伸成全高导致sticky失效。
• 右侧侧边栏固定在容器最右侧，层级高于中间内容，会悬浮在绿色区域上层；即使表格横向超出、中间区域出现横向滚动，右侧栏也不会跟着内容偏移，始终保持吸顶状态，加的pointer-events属性可以避免右侧栏遮挡下方表格的交互操作。
• 头部层级最高，滚动时不会被侧边栏覆盖。如果后续给头部设置固定高度（比如61px），只需要把两个侧边栏的top值改成对应高度即可，避免内容被头部遮挡。

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