滚动时如何实现div同时在左右两侧保持sticky粘性定位效果

问题根因 #

你现有代码中left吸附不生效的核心原因：

1. 没有给父容器/页面设置正确的水平滚动上下文，sticky定位的偏移阈值计算依赖滚动容器的视口范围
2. flex布局下子元素默认允许收缩，导致#first-part和#second-part的宽度计算不符合预期，left阈值无法触发
3. #second-part的内部子元素宽度远大于自身宽度，干扰了sticky定位的可偏移范围计算

修正方案 #

修改后的代码如下：

CSS代码

/* 给页面配置水平滚动上下文和边距阈值 */
body {
  overflow-x: auto;
  padding: 0 105px;
  margin: 0;
  /* 最小宽度保证滚动范围能覆盖所有内容，可按需调整 */
  min-width: 1900px;
}

#parent {
  display: flex;
  width: fit-content;
  border: 1px solid red;
}

#first-part {
  width: 800px;
  /* 禁止flex收缩，保证宽度固定 */
  flex-shrink: 0;
  background-color: lightgreen;
}

#second-part {
  position: sticky;
  left: 105px;
  right: 105px;
  width: 130px;
  /* 禁止flex收缩，保证宽度固定 */
  flex-shrink: 0;
  background-color: silver;
}

.text-in-second-part {
  width: 850px;
  border: 1px solid black;
}

HTML代码

<div id="parent">
  <div id="first-part">
    First part
  </div>
  <div id="second-part">
    <div class="text-in-second-part">Second part</div>
  </div>
</div>

效果说明 #

水平滚动页面时：

• 向左滚动（右侧内容进入视口）：#second-part会跟随内容移动，直到距离视口右侧105px时吸附固定
• 向右滚动（左侧内容进入视口）：#second-part会跟随内容移动，直到距离视口左侧105px时吸附固定

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