Sticky定位未按预期生效？需实现黄色区域内顶部固定效果

你的sticky定位失效，核心原因是sticky元素的父容器没有足够高度，导致没有触发sticky定位的滚动空间：

• 红色sticky盒子的父容器（蓝色背景的w-1/2 div）默认由内容撑开，高度仅等于红色盒子的高度（h-40），没有和左侧的高容器对齐，sticky元素没有足够的滚动范围来触发固定行为。

修复步骤 #

给蓝色父容器添加h-full类，让它占满外层flex容器的高度（h-[1000px]），这样sticky元素就能在父容器的滚动范围内触发定位：

<div className="bg-yellow-200 z-10 ">
  <div className="flex flex-row h-[1000px] ">
    <div className="flex flex-col gap-4 w-1/2">
      <div className="h-40 w-96 bg-green-200"></div>
      <div className="h-40 w-96 bg-green-200"></div>
      <div className="h-40 w-96 bg-green-200"></div>
    </div>

    <div className="w-1/2 bg-blue-400 z-50 h-full"> <!-- 新增h-full -->
      <div className="sticky top-0 left-0 right-0 w-40 h-40 bg-red-500 z-50">
        <p>sticky</p>
      </div>
    </div>
  </div>
</div>

原理说明 #

sticky定位的生效条件：

• 元素必须设置top/bottom等偏移值（你已经设置了top-0）
• 父容器必须有明确的高度（或足够的滚动空间），让元素能在滚动过程中先跟随滚动，到达偏移位置后固定，直到父容器完全滚出视口。

添加h-full后，蓝色父容器高度和左侧容器一致（1000px），页面滚动时，红色盒子会在进入视口顶部时固定，直到黄色容器完全滚出视口后取消固定，符合你的预期效果。

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