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

Question

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

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

[

 <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 品牌是 ovarlaped，我希望它在中心对齐
• 用户导航栏的编辑代码

<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>

示例在这里

---

选项 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;
}

示例在这里

Answer 2

我认为最简单的选择是在 body 上添加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