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

Posted 2023-03-05

【中文标题】如何使用侧边栏将引导导航栏修复到顶部

【英文标题】：How to fix bootstrap navbar to top with sidebar

【发布时间】：2020-12-06 07:45:27

【问题描述】：

我正在开发一个页面，其中既有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

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

【问题讨论】：

所以您想将导航栏固定在屏幕顶部，但在侧边栏下方？我是否正确理解您的问题？为什么不能只做 position: fixed, zIndex: 0？

这能回答你的问题吗？ z-index not working with fixed positioning

【参考方案1】：

Navbar
  z-index: 1000;

.sidebar 
  z-index: 500;

它会正常工作的。

【参考方案2】：

除非我误解了你的问题，否则应该这样做：

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

【讨论】：

nop 它覆盖了侧边栏，你可以检查代码

我不明白您所说的“覆盖侧边栏”是什么意思。您希望导航栏位于侧边栏下方还是上方？

如果你想要它在侧边栏下方然后将 z 索引更改为 0 @manish

【参考方案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 设置为相等。

【参考方案4】：

改变位置

position:sticky 到 侧边栏

.sidebar 
 position: sticky;

position:fixed 到 navbar_style

.navbar_style 
  position: fixed;