粘性列无法固定在父div内的技术问题排查

你遇到的核心问题是粘性元素的定位上下文错误，导致父容器无法约束它的位置：

问题根源 #

1. 你把左右粘性列放在了一个fixed top-0 w-full的容器里，fixed定位的元素完全脱离文档流，只相对于浏览器视口定位，父容器的边界对它没有任何约束作用。
2. 粘性列本身设置了h-screen，高度等于整个视口，当页面滚动到父容器底部时，这个fixed容器不会跟着父容器停止，自然会覆盖下方的RecommendedProducts。

修复方案 #

直接调整结构和定位属性，让粘性元素基于父容器生效：

1. 移除包裹粘性列的fixed容器，让粘性元素回到父容器的文档流中；
2. 给粘性列的父级grid容器设置合适的布局，确保它和上方图片区域同属一个父容器；
3. 修正粘性定位的属性，让元素在父容器范围内固定，到达父容器底部时停止。

修改后的核心代码如下：

<>
  <div className="h-full w-screen">
    <div className="bg-[#EFEFEF] relative w-full pt-12">
      {images &&
        images.map((image) => (
          <div className="flex items-center justify-center" key={image.id}>
            <div className="relative h-[calc(100vh-48px)] w-full">
              <img
                src="https://i.ibb.co/mDTWnb2/hej.webp"
                alt={image.alt}
                className="object-contain w-full h-full"
              />
            </div>
          </div>
        ))}

      {/* 移除外层fixed容器，直接保留grid布局 */}
      <div className="mx-auto flex w-11/12 flex-col items-center justify-center space-y-8 sm:grid sm:w-full sm:max-w-screen-3xl sm:grid-cols-3 sm:space-y-0 sm:px-6 lg:px-8">
        {/* Left column */}
        <div className="flex w-full items-center justify-center self-start sm:sticky sm:top-0 sm:bottom-auto">
          <div className="flex w-[300px] flex-col items-center justify-start bottom-0 overflow-y-auto">
            <ProductDescription />
          </div>
        </div>

        {/* Middle column */}
        <div className="hidden sm:block"></div>

        {/* Right column */}
        <div className="flex w-full items-center justify-center self-start sm:sticky sm:top-0 sm:bottom-auto">
          <div className="flex w-[200px] flex-col items-center justify-start bottom-0 overflow-y-auto">
            <ProductDescription />
          </div>
        </div>
      </div>
    </div>
  </div>

  <RecommendedProducts />
</>

关键调整点说明 #

• 去掉fixed容器后，粘性元素的定位上下文变成了父级的bg-[#EFEFEF]容器（因为该容器设置了relative）；
• 将sm:inset-y-0改为sm:top-0 sm:bottom-auto，明确粘性元素仅在顶部固定，当父容器滚动出视口时，粘性元素会跟着父容器一起离开；
• 移除h-screen，让粘性列高度自适应内容，避免超出父容器范围。

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