问题描述
我有 2 个盒子:面板和侧边栏,在 flexBox 中,带有 flex-direction: row
和 justify-content: space-between
我能够将它们并排水平对齐,中间有间隙。
现在我想修复右侧的侧边栏位置,即向下滚动时,侧边栏应始终保持在屏幕顶部,无论面板的位置如何。我怎样才能用 CSS 做到这一点?
此处的工作示例:https://codesandbox.io/s/gallant-saha-zgmnw
App.js:
import React from "react";
import "./App.scss";
import Panel from "./Panel";
import Sidebar from "./Sidebar";
export default function App() {
return (
<div className="App">
<Panel />
<Sidebar />
</div>
);
}
App.scss:
.App {
width: 1100px;
font-family: sans-serif;
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}
Panel.js:
import React from "react";
import "./Panel.scss";
const Panel = () => {
return (
<>
<div className="panel">The main panel</div>
</>
);
};
export default Panel;
Sidebar.js:
import React from "react";
import "./Sidebar.scss";
const Sidebar = () => {
return (
<>
<div className="sidebar">The sidebar</div>
</>
);
};
export default Sidebar;
解决方法
我修改了你的侧边栏 css。 我使用了位置固定,因为这将使侧边栏固定在视口中,以便您滚动时它会保持静态。
.sidebar {
position: fixed; /* add this */
width: 200px;
height: 200px;
text-align: center;
border: 1px black solid;
left: 906px /* add this */
}
这会产生预期的效果。测试和工作。抱歉,我已经更新了我的答案。
,将此 css 添加到 .sidebar
position:fixed;
right: 10px;
此外,您还可以添加:
top: -- px
如果你有导航栏。