如何使用侧边栏将引导导航栏修复到顶部

Question

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

问题

但是当我使用内置fixed-top引导程序 class 它覆盖侧边栏时，我的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;

}

工作代码沙箱

我已经在沙箱中编写了最少的代码，我只想将导航栏修复到顶部而不覆盖我的侧边栏，请检查代码沙箱

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

如果我理解正确，header 导航的 position 与侧边栏导航重叠 - 这是因为这两个项目都是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 position:fixed到导航栏样式

.navbar_style {
  position: fixed;
}

Answer 5

你可以加

粘顶

侧边栏和导航栏上的 class class