求助：实现column2主图片滚动粘性定位，滚动至column1末尾随动

问题分析 #

你的position:sticky未生效主要有两个核心问题：

1. top:10缺少单位，浏览器无法解析这个定位值
2. 父容器.row默认是块级布局，.column2会被挤到.column1下方，粘性定位的参照逻辑无法正常触发

修复后的代码 #

CSS

/* 父容器用flex实现两列并排 */
.row {
  display: flex;
  gap: 20px; /* 可选：列之间的间距 */
}

.column1 {
  flex: 1; /* 让column1占据剩余宽度 */
}

.column2 {
  position: sticky;
  top: 10px; /* 补充单位px */
  align-self: flex-start; /* 确保column2从顶部开始定位 */
  width: 300px; /* 可选：给右侧列设置固定宽度 */
}

/* 给内部元素加样式方便演示 */
.column {
  width: 100%;
  height: 200px;
  background: #eee;
  margin-bottom: 10px;
}
.column2 img {
  width: 100%;
  height: auto;
}

HTML

<div class="row">
  <div class="column1">
    <div class="row">
      <div class="column">Image1</div>
      <div class="column">Image2</div>
      <div class="column">Image3</div>
    </div>
    <div class="row">
      <div class="column">Image4</div>
      <div class="column">Image5</div>
      <div class="column">Image6</div>
    </div>
    <div class="row">
      <div class="column">Image7</div>
      <div class="column">Image8</div>
      <div class="column">Image9</div>
    </div>
  </div>
  <div class="column2">
    <img src="MainImage" alt="主图">
  </div>
</div>

额外注意事项 #

• 确保所有祖先元素（包括body、html）没有设置overflow: hidden/auto/scroll，否则sticky会相对于该滚动容器定位，而非视口
• 当滚动到.column1内容末尾时，.column2会自动跟随页面继续滚动，无需额外配置

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