如何在带overflow属性的div内实现sticky定位效果

核心原因 #

问题出在两个点：一是带overflow: auto的容器没有设置高度限制，它会被内容完全撑开，不会产生滚动行为，自然无法触发position: sticky的定位逻辑；二是header2的height: "7000"缺少单位，属于无效样式。

方案一：给滚动容器设置明确高度（最直接） #

给带overflow: auto的容器添加高度限制，让它能产生滚动，同时修正header2的无效样式：

<div style={{ width: "100%" }}>
  <div style={{ background: "green", height: "60px" }}>header 1</div>

  {/* 给滚动容器设置高度，适配页面剩余空间 */}
  <div style={{ overflow: "auto", height: "calc(100vh - 60px)" }}>
    <div
      style={{
        background: "red",
        position: "sticky",
        top: 0,
        padding: "1rem",
      }}
    >
      header 2
    </div>
    <div style={{ display: "inline-flex", gap: "5px", paddingBottom: "1rem" }}>
      {array.map((item, index) => (
        <div
          key={index}
          style={{ width: "200px", height: "2000px", background: "gray" }}
        >
          {item}
        </div>
      ))}
    </div>
  </div>
</div>

方案二：拆分滚动区域与sticky元素（布局更灵活） #

如果不想给滚动容器固定高度，可以用flex布局拆分结构，让仅内容区域滚动，header2与滚动容器同级：

<div style={{ width: "100%", height: "100vh", display: "flex", flexDirection: "column" }}>
  <div style={{ background: "green" }}>header 1</div>

  {/* 父容器用flex垂直布局，分配剩余空间 */}
  <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
    <div
      style={{
        background: "red",
        position: "sticky",
        top: 0,
        padding: "1rem",
      }}
    >
      header 2
    </div>
    {/* 仅让内容区域滚动 */}
    <div style={{ overflow: "auto", flex: 1 }}>
      <div style={{ display: "inline-flex", gap: "5px", paddingBottom: "1rem" }}>
        {array.map((item, index) => (
          <div
            key={index}
            style={{ width: "200px", height: "2000px", background: "gray" }}
          >
            {item}
          </div>
        ))}
      </div>
    </div>
  </div>
</div>

关键注意点 #

• position: sticky 生效的前提是：它的最近滚动祖先容器必须有高度限制，且内容超出时能触发滚动。
• 要确保sticky元素的top（或其他方向属性）值有效，不能超出滚动容器的可视范围。

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