我尝试了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;
}
我知道有很多解决方案,我尝试了很多。
答案 0 :(得分: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}>
为什么? Col
的父母是Row
。两者的高度相同。 Col
仅在其父级更高时才会停留,并且在滚动过程中Col
将消失。这将永远不会发生,因为正如我所说的,他们都是同一高度。如果您在position: sticky
上设置Row
,而其父级包含整个页面(父级高于Web浏览器窗口),则position: sticky
可以正常工作。
答案 1 :(得分:0)
您的代码必须在标头上,而不是标头内的div
只需将其添加到您的style.css文件
.header {
position: sticky;
top: 0;
}
它工作正常。