React+Antd项目中Header滚动无法固定的问题求助

我之前也遇到过类似Antd Row/Col搭配position:sticky失效的问题，咱们一步步来排查和解决：

问题根源分析 #

你当前的代码把position:sticky加在了Col组件上，但存在两个关键问题：

1. Antd的Row组件默认是flex容器，Col作为flex子元素，其sticky行为会被父级的flex布局限制，无法正常触发吸附；
2. 没有设置z-index，即使sticky生效，Header也可能被下方的Content区域遮挡。

解决方案一：用position:sticky修复（推荐） #

把sticky属性直接应用到Header的Row容器上，同时添加z-index确保层级优先：

修改后的React代码 #

import * as React from "react";
import { render } from "react-dom";
import { Row, Col } from "antd";
import "./styles.css";

function App() {
  return (
    <div>
      {/* 将sticky属性移到Row上，添加z-index */}
      <Row 
        className="header" 
        style={{ position: "sticky", top: 0, zIndex: 100 }}
      >
        <Col span={24} style={{ background: "#0392FD" }}>
          <div>
            <Row>
              <Col>Col1</Col>
              <Col>Col1</Col>
              <Col>Col1</Col>
            </Row>
          </div>
        </Col>
      </Row>
      <Row className="content">
        <Col span={24} style={{ height: "120vh" }}>
          Content
        </Col>
      </Row>
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

可选：用CSS类替代行内样式 #

如果更喜欢用CSS管理样式，可以修改styles.css：

.App {
  font-family: sans-serif;
  text-align: center;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.header .ant-col {
  background: #0392FD;
}

解决方案二：用position:fixed替代 #

如果你更倾向于用fixed布局，需要给下方的Content添加顶部margin，避免被固定的Header遮挡：

<Row 
  className="header" 
  style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 100 }}
>
  <Col span={24} style={{ background: "#0392FD" }}>
    {/* Header内容 */}
  </Col>
</Row>
<Row className="content" style={{ marginTop: "60px" }}> {/* 数值等于Header的实际高度 */}
  <Col span={24} style={{ height: "120vh" }}>
    Content
  </Col>
</Row>

额外注意事项 #

• 确保Header的所有父元素（比如外层的div）没有设置overflow: hidden或transform属性，这些属性会直接破坏position:sticky的生效逻辑；
• z-index的数值只要大于Content的层级即可，一般设置100足够应对大部分场景。

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