Как сделать так, чтобы при прокрутке навигационная панель закреплялась на фиксированной верхней панели?

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>

• Поведение после удаления делений строк и столбцов после прокрутки вниз но этим django марка ovarlaped, я хочу, чтобы выровнять по центру
• отредактированный код пользователей navbar

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

 </nav> 

Answer 1

Я вижу два варианта, в зависимости от вашего проекта:

Вариант 1: Specifi c высота

Если вы знаете, что высота вашего "Django бара" никогда не изменится Вы можете жестко закодировать это, так что ваша «Панель пользователей» будет зафиксирована на этой позиции. Ваша «Панель пользователей» будет выглядеть так:

<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

Я думаю, что самый простой вариант - добавить 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 Несколько панелей навигации с фиксированным верхом

Answer 3

Добавьте класс к панели навигации при прокрутке:

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

Добавьте navbar-fixed-top, и он останется там, где вам нужно.

Документация: https://getbootstrap.com/components/#navbar -fixed-топ