Почему при прокрутке заголовок не фиксируется?

Question

Я пробовал css свойства для position:fixed.Я тоже пробовал position:sticky, top:0, но заголовок не исправлен.

Вот мой код, как вы можете видеть, я использую реагировать и antd в качестве библиотеки компонентов.

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

import "./styles.css";

function App() {
   return (
     <div>
       <Row className="header">
         <Col
           span={24}
           style={{
             background: "#0392FD",
             position: "sticky",
             top: 0
           }}
         >
          <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:

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

Iзнаю, что есть много решений, и я попробовал много из них.

Answer 1

Ваш код должен быть в заголовке, а не в div внутри вашего заголовка

Просто добавьте это в свой файл style.css

.header {
  position: sticky;
  top: 0;
}

Отлично работает.

Answer 2

Вместо

<Row className="header">
<Col
  span={24}
  style={{
    background: "#0392FD",
    position: "sticky",
    top: 0
  }}
>

Вы должны написать это так

<Row
    className="header"
    style={{
        background: "#0392FD",
        position: "sticky",
        top: 0
      }}
>
<Col span={24}>

Демо

Почему? Родитель Col - Row. Оба имеют одинаковую высоту. Col будет придерживаться, только если его родитель выше и во время прокрутки Col исчезнет. Этого никогда не произойдет, потому что, как я сказал, они оба одинакового роста. Если вы установите position: sticky на Row, родитель которого содержит всю страницу (родитель выше, чем окно веб-браузера), то position: sticky будет работать нормально.