Grid容器中Position sticky未按预期工作的问题

核心逻辑是让imageContainer的滚动上下文绑定到整个页面，而非grid容器本身，这样就能实现随页面滚动保持sticky，直到itemFeatures滚到底部，同时避免出现不必要的滚动条。

具体实现步骤： #

• 给grid容器（.thumb）不要设置任何overflow属性，让页面成为滚动上下文，保证sticky定位基于视口生效。
• 给imageContainer设置sticky定位，搭配align-self: start确保它在grid轨道内顶部对齐，同时指定top值控制与视口顶部的距离。
• 让itemFeatures的内容自然撑开高度，绝对不要加overflow-y: auto，否则会把滚动限制在容器内部，破坏联动效果。

示例代码： #

HTML

<div class="thumb">
  <div class="imageContainer">
    <!-- 这里放你的图片内容 -->
    <img src="your-image-url" alt="展示图片">
  </div>
  <div class="itemFeatures">
    <!-- 这里放长内容，比如多段文本或列表 -->
    <p>特性描述1...</p>
    <p>特性描述2...</p>
    <!-- 重复足够多内容让容器高度超过视口 -->
  </div>
</div>

CSS

.thumb {
  display: grid;
  grid-template-columns: 320px 1fr; /* 根据需求调整列宽比例 */
  gap: 2rem;
  padding: 0 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.imageContainer {
  position: sticky;
  top: 20px; /* 距离视口顶部的间距，可自定义 */
  align-self: start;
  /* 可选：给图片容器加基础样式 */
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 8px;
}

.itemFeatures {
  /* 仅设置必要样式，不要加overflow相关属性 */
  padding: 1rem;
}

关键注意事项： #

• 若grid容器设置了height或overflow属性，会把sticky的滚动范围限制在容器内部，直接导致需求效果失效，必须移除这些设置。
• 测试时确保itemFeatures的高度足够长（超过视口高度），这样才能触发滚动到底部时的联动效果。

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