Делаем загрузчик navbar липким, только когда navbar-collapse show - PullRequest
Новая
       14

Делаем загрузчик navbar липким, только когда navbar-collapse show

0 голосов
/ 10 мая 2019

Я хочу сделать мою навигационную панель фиксированной позицией, только если отображается свернутое меню.Кажется, я могу сделать это только навсегда исправленным независимо от триггера функции коллапса, а это не то, что я хочу

Это то, что у меня есть 

<nav class="navbar navbar-expand-lg navbar-light bg-white align-items-stretch">
  <a href="{{ url('/') }}" class="navbar-brand">
    <img class="navbar-logo img-fluid" src="{{ asset('img/generic.png') }}">
  </a>
  <button class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbar_collapse" aria-expanded="false">
    <span class="navbar-toggler-icon "></span>
  </button>
  <div class="navbar-collapse collapse align-items-stretch bg-white" id="navbar_collapse">
  <!--collapse menu code-->
  </div>
</nav>

и в моем файле css указать навигационную панель только на версии устройства 

    @media (max-width: 992px) {
        .navbar-fix  {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 10;
        }
    }

и мой скрипт 


$( document ).ready(function() {
    $('.navbar').click(function(){
        $('.navbar.navbar-fixed').removeClass('navbar-fixed');
        $(this).addClass('navbar-fixed');
        console.log( "nav fix" );
    });
});

Который не загружает его обратно в относительное положение, когда коллапс скрыт.И как я могу указать, чтобы это было исправлено, только когда я нажимаю на переключатель?

Ответы [ 2 ]

1 голос
/ 10 мая 2019

Немного трудно понять, что именно вы спрашиваете, но я сделаю это.

Итак, когда вы говорите ...

Я хочусделать мою навигационную панель фиксированной позицией, только если показано свернутое меню.Кажется, я могу сделать его только постоянно исправленным независимо от триггера функции коллапса.

Кажется, что у вас возникают трудности при изменении атрибута положения панели навигации в точке останова lg (992px).Без дополнительного содержимого на странице трудно определить, что на самом деле происходит при достижении точки останова.Итак, я вставил ваш фрагмент в свою IDE, добавил текст-заполнитель и поиграл с инструментами разработки Chrome, чтобы увидеть, что происходит.

Давайте разберем компоненты на работе здесь ...

Для navbar, класс "navbar-expand-lg" говорит, чтобы развернуть / показать панель навигации, когда экран 992px или больше.Таким образом, свернутая версия будет отображаться только тогда, когда ее размер меньше 992 пикселей.

Теперь в вашем фрагменте css есть медиа-запрос для точки останова lg (992px).Поэтому стили внутри @media codeblock будут применяться, когда экран имеет разрешение 992px или меньше.Поскольку в этом запросе @media для атрибута position установлено значение «fixed», для панели навигации устанавливается фиксированное значение, когда экран не более 992 пикселей.

Собрав все вместе, вы

хочет, чтобы моя панель навигации была в фиксированном положении, только если отображается свернутое меню.

Ваше свернутое меню отображается, когда размер экрана меньше 992 пикселей.Ваш запрос @media устанавливает фиксированную панель навигации, если размер экрана меньше 992 пикселей.Что может решить вашу проблему, так это установить атрибут положения панели навигации, когда экран больше 992 пикселей.

Если я не ответил на правильный вопрос, или если вы пытались полностью удалить панель навигации, кроме случаев, когда отображается свернутая, посмотрите на настройку дисплея, чтобы удалить ее в точке останова lg.

Надеюсь, это поможет!

0 голосов
/ 10 мая 2019

Поскольку вы используете navbar-expand-,g, панель навигации рушится, когда ширина области просмотра меньше 992px.

flex

Сначала используйте контейнер для панели навигации и основное содержимое страницы.

<div>
  <nav class="navbar navbar-expand-md navbar-light bg-light">

  </nav>
  <main id"content">

  </main>
</div>

Как следует из названия, nav предназначен для меню панели навигации, а main - для остального содержимого.

  1. Используйте класс h-100 для всех родителейdiv, включая html и body.
  2. Использование классов d-flex, flex-column и h-100 для div.
  3. Использование flex-grow-1и flex-lg-grow-0 для элемента main.
  4. Используйте overflow:auto/scroll для main, когда область просмотра меньше 992px.

html, body {
  height: 100%;
}

@media (max-width: 992px) {
  .overflow-y-auto {
    overflow-y: auto;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex d-lg-block flex-column  bg-primary h-100 overflow-y-hidden">
  <nav class="navbar navbar-expand-md navbar-light bg-light navbar-fixed">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
  <main class="flex-grow-1 flex-lg-grow-0 overflow-y-auto">
    <div class="container ">
      <div class="row">
        <div class="col">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis, ipsum tempore molestiae praesentium asperiores iusto quod, sit cum ab veniam laudantium quia assumenda accusantium velit dolorem magni culpa rem nemo.
          Aspernatur corrupti officia magni perferendis reiciendis iure nisi eius inventore ab soluta eum quidem non ipsum aut sunt facilis deserunt ea dolor, blanditiis vel vitae temporibus voluptatem harum. Voluptatibus, eos.
          Ducimus reprehenderit repudiandae nihil magnam est atque vitae distinctio. Ad, est consequuntur, maxime ut tenetur voluptate culpa praesentium modi, voluptas repellat magnam alias esse animi doloribus. Maxime non quas et?
          Harum, tenetur. Beatae deserunt ipsa reiciendis adipisci, est velit eligendi quod optio obcaecati magni consequuntur blanditiis expedita modi. Quasi vitae maxime voluptates alias ipsam, ex aspernatur nesciunt aperiam eveniet pariatur?
          Nemo, explicabo? Quasi repudiandae consectetur similique, adipisci vitae error quia recusandae, eos quas fugiat quae expedita nisi hic libero. Cum distinctio blanditiis magnam, esse deserunt commodi totam vero soluta. Reprehenderit.
          Distinctio qui exercitationem vero provident totam, quis molestias illo eius iusto at atque aliquam excepturi! Quos omnis tempore, aut tempora odit consectetur possimus, dolore voluptates enim iste distinctio, perspiciatis sapiente.
          Eius eos reiciendis quis aliquam dolorum earum, assumenda deserunt animi consectetur accusantium sit numquam doloremque minima! Illo tenetur aliquam ea dicta eaque. Aspernatur animi optio hic provident obcaecati dicta ex.
          Tempora sed expedita, sunt minus ab saepe itaque, inventore placeat dolores eos voluptates fugit facilis explicabo cum eius quod excepturi neque veritatis molestiae quia magni soluta corporis rerum vero? Dignissimos.
          Aliquid pariatur placeat delectus, repellendus atque ullam obcaecati animi. Fugiat, at architecto? Inventore illum quidem unde molestiae eveniet placeat veritatis doloremque autem, tempora non cum adipisci tenetur ex iure esse.
          Rem et quisquam ad nesciunt, ipsa eligendi. Ipsa, libero magnam ducimus nihil minima odio. Officia, amet cum? Fugit aliquid consectetur, veritatis consequatur accusamus accusantium harum ex, error repellat fugiat excepturi.
        </div>
      </div>
    </div>
  </main>
</div>

https://codepen.io/anon/pen/Xwdzav

фиксированная позиция

Используйте тот же CSS, который вы используете.Но так как, фиксированное положение удаляет элементы из обычного потока контента, вам нужно использовать отступы или поля сверху для основного контента вашей страницы.Его размер должен быть больше или равен высоте панели навигации.

@media (max-width: 992px) {
  .fixed-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000000;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-nav">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
  <main class="bg-primary pt-lg-0 pt-5">
    <div class="container ">
      <div class="row">
        <div class="col">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis, ipsum tempore molestiae praesentium asperiores iusto quod, sit cum ab veniam laudantium quia assumenda accusantium velit dolorem magni culpa rem nemo.
          Aspernatur corrupti officia magni perferendis reiciendis iure nisi eius inventore ab soluta eum quidem non ipsum aut sunt facilis deserunt ea dolor, blanditiis vel vitae temporibus voluptatem harum. Voluptatibus, eos.
          Ducimus reprehenderit repudiandae nihil magnam est atque vitae distinctio. Ad, est consequuntur, maxime ut tenetur voluptate culpa praesentium modi, voluptas repellat magnam alias esse animi doloribus. Maxime non quas et?
          Harum, tenetur. Beatae deserunt ipsa reiciendis adipisci, est velit eligendi quod optio obcaecati magni consequuntur blanditiis expedita modi. Quasi vitae maxime voluptates alias ipsam, ex aspernatur nesciunt aperiam eveniet pariatur?
          Nemo, explicabo? Quasi repudiandae consectetur similique, adipisci vitae error quia recusandae, eos quas fugiat quae expedita nisi hic libero. Cum distinctio blanditiis magnam, esse deserunt commodi totam vero soluta. Reprehenderit.
          Distinctio qui exercitationem vero provident totam, quis molestias illo eius iusto at atque aliquam excepturi! Quos omnis tempore, aut tempora odit consectetur possimus, dolore voluptates enim iste distinctio, perspiciatis sapiente.
          Eius eos reiciendis quis aliquam dolorum earum, assumenda deserunt animi consectetur accusantium sit numquam doloremque minima! Illo tenetur aliquam ea dicta eaque. Aspernatur animi optio hic provident obcaecati dicta ex.
          Tempora sed expedita, sunt minus ab saepe itaque, inventore placeat dolores eos voluptates fugit facilis explicabo cum eius quod excepturi neque veritatis molestiae quia magni soluta corporis rerum vero? Dignissimos.
          Aliquid pariatur placeat delectus, repellendus atque ullam obcaecati animi. Fugiat, at architecto? Inventore illum quidem unde molestiae eveniet placeat veritatis doloremque autem, tempora non cum adipisci tenetur ex iure esse.
          Rem et quisquam ad nesciunt, ipsa eligendi. Ipsa, libero magnam ducimus nihil minima odio. Officia, amet cum? Fugit aliquid consectetur, veritatis consequatur accusamus accusantium harum ex, error repellat fugiat excepturi.
        </div>
      </div>
    </div>
  </main>

https://codepen.io/anon/pen/XwdzZr

Вы должны использовать версию Boostrap 4.1 или выше, так как более низкая версия не имеет flex-grow-1

Вы можете также найти эту ссылку полезной.

Перевернуть нижний колонтитул в нижней части страницы при загрузке 4

...