Bootstrap 4 - Как заставить навигационную панель с фиксированным верхом исчезать при прокрутке

Question

С помощью Bootstrap 4, как я могу заставить навигационную панель с фиксированным верхом исчезать при прокрутке? Я прикрепил ниже HTML-код для панели навигации по умолчанию Bootstrap 4.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Test</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav ml-auto py-md-2">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Answer 1

Чтобы условно удалить фиксированное положение панели навигации, когда вы достигли определенного смещения (в этом примере мы будем использовать 150px от вершины области просмотра), тогда вы можете сделать:

$(window).on('scroll', function (e) {
  $('.navbar')[$(window).scrollTop() >= 150 ? 'removeClass' : 'addClass']('fixed-top');
})

Согласно комментарию ajax333221 , toggleClass() также может быть использовано:

$(window).on('scroll', function (e) {
  $('.navbar').toggleClass('fixed-top', $(window).scrollTop() < 150);
})

Answer 2

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

JQuery

// scroll functions
$(window).scroll(function(e) {

    // add/remove class to navbar when scrolling to hide/show
    var scroll = $(window).scrollTop();
    if (scroll >= 150) {
        $('.navbar').addClass("navbar-hide");
    } else {
        $('.navbar').removeClass("navbar-hide");
    }

});

Вариант затухания CSS на панели навигации

Codeply demo https://www.codeply.com/go/rTR1dcn4n6

.navbar {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.navbar-hide {
    pointer-events: none;
    opacity: 0;
}

Опция слайдера CSS navbar

Codeply demo https://www.codeply.com/go/7Fab8Thufl

.navbar {
    transition: top 0.5s ease;
}

.navbar-hide {
    top: -56px;
}

---

Ответ Кью, вероятно, будет намного лучше, если вам нравится меньше кода, вот его метод ниже, использующий мой класс hide.

JQuery Кью

// scroll functions
$(window).scroll(function(e) {

    // add/remove class to navbar when scrolling to hide/show
    $('.navbar')[$(window).scrollTop() >= 150 ? 'addClass' : 'removeClass']('navbar-hide');

});

Опция затухания CSS в панели навигации (такая же, как указано выше)

Codeply demo https://www.codeply.com/go/KPnx8ewEED

Опция слайдера CSS-панели навигации (такая же, как указано выше)

Codeply demo https://www.codeply.com/go/i82vYBGeu7

Answer 3

Fixed-top заставляет навигацию оставаться fixed к вершине области просмотра.

"Элемент с позицией: фиксированный; расположен относительно видового экрана, что означает, что он всегда остается на том же месте, даже если страница прокручивается Свойства top, right, bottom и left используются позиционировать элемент. "

Элементы HTML изначально перемещаются при прокрутке вниз. Если вы хотите, чтобы навигация прокручивалась вместе с содержимым, вам нужно удалить этот класс.