选项1：特定高度

Question

我在页面中有两个顶级导航栏。其中一个是固定的，而另一个是固定的，但是当我向下滚动时，粘性导航栏不会停留在固定导航栏的顶部：

当我向下滚动时，导航栏消失：

[ [2]

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar fixed-top navbar-dark bg-dark navbar-expand-lg">  
      <a href="http://127.0.0.1:8000/"class="navbar-brand">My Django App</a>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a href="http://127.0.0.1:8000/"class="nav-link">Home Page</a></li>
        <li class="nav-item"><a href="http://127.0.0.1:8000/signup" class="nav-link">Sign Up</a></li>
      </ul>
    </nav> 
    
    {% if data %}
    <div class="row">
      <div class="col col-lg-1"></div>
      <div class="col col-lg-8">
        <nav class="navbar sticky-top navbar-dark bg-dark ">
          <a class="navbar-brand display-4">List of Users</a>
        </nav>
      </div>  
    </div>

向下滚动后删除row和col div 后的行为但这使django品牌皱了起来，我希望它在中心对齐
用户导航栏的编辑代码

<nav class="navbar sticky-top navbar-dark bg-dark">
                    <a class="navbar-brand display-4">List of Users</a>

 </nav>

Answer 1

我看到两个选项，具体取决于您的项目：

选项1：特定高度

如果您知道“ Django bar”的高度永远不会改变，则可以对其进行硬编码，以便将“ Users bar”固定在该位置。您的“用户栏”如下所示：

<div class="row sticky-top" style="top: 56px">
  <div class="col col-lg-1"></div>
  <div class="col col-lg-8">
    <nav class="navbar navbar-dark bg-dark">
      <a href="#" class="navbar-brand display-4">List of Users</a>
    </nav>
  </div>  
</div>

Example here

选项2：创建自己的导航栏

这将为您提供更大的灵活性，以实现更多的“独特”布局。当然，不利之处在于，您将需要配置移动布局并处理Bootstrap通常为您处理的其他事情。并不是说您应该自己做所有事情，您仍然可以使用Bootstrap帮助程序类，但可以自己制作navbar。

HTML：

<div class="custom-navbar">
    <a href="http://127.0.0.1:8000/"class="custom-brand">My Django App</a>
    <ul class="custom-navbar-ul ml-auto">
        <li class="nav-item"><a href="http://127.0.0.1:8000/"class="custom-link">Home Page</a></li>
        <li class="nav-item"><a href="http://127.0.0.1:8000/signup" class="custom-link">Sign Up</a></li>
    </ul>
</div>
<div class="row">
    <div class="col col-lg-1"></div>
    <div class="col col-lg-8">
        <nav class="navbar navbar-dark bg-dark">
            <a href="#" class="navbar-brand display-4">List of Users</a>
        </nav>
    </div>  
</div>

CSS：

.custom-navbar {
    background-color: #343a40;
    color: #fff;
    display: flex;
    padding: .5rem 1rem;
    align-items: center;
    flex-flow: row nowrap;
}

.custom-navbar .custom-brand {
    color: #fff;
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}

.custom-navbar-ul {
    display: flex;
    list-style: none;
    padding-left: 0;
   margin-bottom: 0;
}

.custom-navbar-ul .custom-link {
    color: rgba(255,255,255,.5);
    padding-right: .5rem;
   padding-left: .5rem;
}

Example here

Answer 2

我认为最简单选项是在主体上添加 padding-top ，并在固定位置设置 z-index：-1 导航栏。

https://codeply.com/p/j3RFVB52OQ

body {
    padding-top: 56px;
}

.fixed-top {
    z-index: -1;
}

然后HTML结构是...

<nav class="navbar fixed-top navbar-dark bg-dark navbar-expand-lg">
    <a href="" class="navbar-brand">My Django App</a>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a href="http://127.0.0.1:8000/" class="nav-link">Home Page</a></li>
        <li class="nav-item"><a href="http://127.0.0.1:8000/signup" class="nav-link">Sign Up</a></li>
    </ul>
</nav>
<div class="container sticky-top">
    <nav class="navbar navbar-dark bg-dark">
        <a href class="navbar-brand">List of Users</a>
    </nav>
</div>
<div class="container">
    <div class="row">
       scrollable content ...
    </div>
</div>

这类似于：Bootstrap 4 Multiple fixed-top navbars

Answer 3

在滚动条上将类添加到导航栏：

<nav class="navbar sticky-top navbar-dark bg-dark navbar-fixed-top">

添加navbar-fixed-top，它将保持在您想要的位置。

文档：https://getbootstrap.com/components/#navbar-fixed-top

CSS-滚动时让导航栏粘贴在固定顶部导航栏上吗？

3 个答案:

选项1：特定高度

选项2：创建自己的导航栏