Question

我尝试了position:fixed的css属性。我也尝试过position:sticky, top:0，但是标题不固定。

这是我的代码，如您所见，我正在使用react和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;
}

我知道有很多解决方案，我尝试了很多。

Answer 1

相反

<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}>

Demo

为什么？ Col的父母是Row。两者的高度相同。 Col仅在其父级更高时才会停留，并且在滚动过程中Col将消失。这将永远不会发生，因为正如我所说的，他们都是同一高度。如果您在position: sticky上设置Row，而其父级包含整个页面（父级高于Web浏览器窗口），则position: sticky可以正常工作。

Answer 2

您的代码必须在标头上，而不是标头内的div

只需将其添加到您的style.css文件

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

它工作正常。

为什么滚动时标题不固定？

2 个答案: