我在页面上有两列。我想创建一个固定在左侧的侧边栏，因此如果滚动主体中包含的内容，则不应滚动它。在较小的屏幕中，侧栏应可折叠。
在研究了各种资源之后，似乎我需要使用jquery，但是我要尽可能地最大化ReactJs的功能。此外，一些消息人士还说，将Jquery与ReactJs混合并不是一个好主意。
边栏现已修复，但我现在的问题是我似乎无法在较小的屏幕上将其收起。它只是固定在那里，在较小的屏幕中消失了。我的目标是在较小的屏幕中创建一个按钮，单击该按钮时应显示侧边栏
这不是我的全部代码。我只是发布相关片段：
[.js]
constructor(props) {
this.state = {
collapsed: true
};
this.toggleNavbar = this.toggleNavbar.bind(this);
}
toggleNavbar() {
this.setState({
collapsed: !this.state.collapsed
});
}
render() {
return (
<div id="sidebar" >
<Navbar color="faded" light className="sticky-top" data-spy="affix">
<NavbarToggler onClick={this.toggleNavbar} className="main-toggler"/>
<Collapse isOpen={this.state.collapsed} navbar>
<Nav navbar>
<Container>
<div>
<NavbarBrand>Theories</NavbarBrand>
<NavbarToggler onClick={this.toggleTheories} />
<Collapse isOpen={!this.state.theoriesCollapsed} navbar>
<NavItem>
</NavItem>
</Collapse>
</div>
</Container>
</Nav>
</Collapse>
</Navbar>
</div>
);
}
[.css]
@media screen and (max-width: 768px)) {
.main-toggler {
display: block;
}
}
@media screen and (max-width: 768px){
#sidebar {
display: none;
}
}
#sidebar {
background: lightgrey;
height:100%;
position: fixed;
z-index: 1;
overflow-y: auto;
will-change: transform;
backface-visibility: hidden;
}
.main-toggler {
float: left !important;
}
.sticky-top {
top: 1rem;
padding-top: 2rem;
}
#sidebar .navbar{
display: inherit;
}
最佳答案
根据我的评论，我为您构建了一个非常基本的示例。
它远非美丽或完美，但应该可以理解。
不需要JS。只是纯HTML + CSS。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sidebar Test</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-flow: row;
}
aside {
width: 20vw;
height: 100vh;
}
main {
width: 100%;
height: 100vh;
background: cornflowerblue;
color: white;
}
#sidebar-toggle {
display: none;
}
.toggle-btn {
display: none;
width: 4em;
height: 2em;
position: relative;
cursor: pointer;
background: yellow;
padding: 2px;
}
@media(max-width:1200px) {
.toggle-btn {
display: block;
}
aside {
width: 0vw;
transition: width 0.25s ease-out;
}
#sidebar-toggle:checked+aside {
width: 20vw;
}
}
</style>
</head>
<body>
<label class="toggle-btn" for="sidebar-toggle">click me</label>
<input id="sidebar-toggle" type="checkbox" />
<aside>
<div>
<ul>
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
</ul>
</div>
</aside>
<main>
<div style="padding: 20px;margin:0 auto;text-align: center;font-size:2em;">Some content</div>
</main>
</body>
</html>关于javascript - 如何使用ReactJS创建固定的侧边栏？侧栏应在较小的屏幕中折叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51861051/