Question

我正在开发一个页面，其中既有sidebar也有navbar，我必须将导航栏修复到顶部，以便获得更好的用户体验。

问题

但是当我使用内置的fixed-top引导程序类时，它覆盖了侧边栏，我的navbar在侧边栏的宽度之后开始，

所以我只想将其固定在顶部，以便滚动变得更容易

我的导航栏代码

<div>
        <Navbar collapseOnSelect expand="lg" className="py-3 navbar_style">
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
                <Nav className="mr-auto"></Nav>
                <Nav>
                    <Nav.Link href="#deets">Logout</Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    </div>

侧栏CSS

.sidebar {
height: 100%;
width: 100px;
position: fixed;
top: 0;
left: 0;
transition: all 0.6s;
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
opacity: 1;

}

Working code Sandbox

我已经在沙箱中编写了最少的代码，我只想在不覆盖边栏的情况下将导航栏固定到顶部，请检查代码沙箱

Answer 1

Navbar{
  z-index: 1000;
}
.sidebar {
  z-index: 500;
}

它将运行正常。

Answer 2

除非我对您的问题有误解，否则应该这样做：

.navbar_style{
  z-index: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

Answer 3

如果我理解正确，则标题导航的位置与边栏导航重叠-这是因为两个项目均为fixed。将fixed-top添加到导航栏中后，您将需要在侧边栏中使用margin-top来添加缓冲区并向下推侧边栏。例子；

.sidebar {
    height: 100%;
    width: 233px;
    position: fixed;
    z-index: 500;
    top: 0;
    left: 0;
    transition: all 0.6s;
    background: rgb(167, 144, 144);
    box-shadow: 0px 3px 6px #e0cccc29;
    opacity: 1;
    margin-top: 72px; /**<--add this**/
}

您必须将其调整为顶部导航栏的大小。使用校对，我可以看到它是72px，所以我将侧边栏的margin-top设置为相等。

Answer 4

更改职位

position:sticky到侧边栏

.sidebar {
 position: sticky;
}

position:fixed到 navbar_style

.navbar_style {
  position: fixed;
}

如何使用侧边栏将引导导航栏固定到顶部

4 个答案: