如何实现Grid布局中文本Item先粘滞后随滚动联动的效果？

核心思路 #

要实现你要的效果，核心是让文本容器先以sticky定位固定在视口，直到图片容器完全滚出视野，再切换成随页面正常滚动的状态。需要结合CSS粘性定位和JavaScript监听滚动位置来动态调整样式。

实现代码 #

HTML结构 #

先给出适配需求的基础结构（可根据你的实际代码调整）：

<div class="product-grid">
  <div class="image-container">
    <img src="img1.jpg" alt="产品图1">
    <img src="img2.jpg" alt="产品图2">
    <img src="img3.jpg" alt="产品图3">
    <img src="img4.jpg" alt="产品图4">
    <img src="img5.jpg" alt="产品图5">
    <img src="img6.jpg" alt="产品图6">
    <img src="img7.jpg" alt="产品图7">
  </div>
  <div class="text-container">
    <h2>产品名称</h2>
    <p>产品详情描述...</p>
    <!-- 更多文本内容 -->
  </div>
</div>

CSS基础样式 #

先搭好Grid布局和基础视觉样式：

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.image-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
}

.text-container {
  /* 初始设置粘性定位，顶部对齐视口 */
  position: sticky;
  top: 0;
  align-self: start;
  /* 加背景色防止被下方内容穿透 */
  background-color: #ffffff;
  padding: 1.5rem;
}

JavaScript控制逻辑 #

通过监听滚动事件，判断图片容器是否完全离开视口，从而切换文本容器的定位状态：

const imageBox = document.querySelector('.image-container');
const textBox = document.querySelector('.text-container');

window.addEventListener('scroll', () => {
  // 获取图片容器底部相对于视口的位置
  const imageBottomPos = imageBox.getBoundingClientRect().bottom;
  
  // 当图片容器底部完全滚出视口时，取消粘性定位
  if (imageBottomPos <= 0) {
    textBox.style.position = 'static';
  } else {
    // 否则恢复粘性定位
    textBox.style.position = 'sticky';
    textBox.style.top = '0';
    textBox.style.alignSelf = 'start';
  }
});

// 页面加载时主动触发一次滚动事件，避免初始状态异常
window.dispatchEvent(new Event('scroll'));

注意事项 #

• 父容器.product-grid不要设置overflow属性，否则会限制sticky定位的作用范围。
• 如果文本容器的内容高度超过视口，粘性状态下它会先自己滚动，直到内容全部显示后，才会跟着页面整体滚动，这和你参考的站点逻辑一致。
• 可以调整top值（比如设为2rem），让文本容器和顶部保持一定间距，提升视觉体验。

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