Bootstrap 3 - Как сделать навигационную панель липкой на прокрутке

Question

То, что я пытаюсь сделать, это заставить навигационную панель оставаться в верхней части страницы, когда вы прокручиваете ее. Поскольку я совершенно новичок в JavaScript, я просмотрел несколько руководств, однако ни один из них не работал с навигационной панелью Bootstrap. Мне просто интересно, есть ли способ сделать это, чтобы он работал с столбцами Bootstrap.

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

Вот HTML код для навигационной панели, в случае, который помогает:

<div class="container"> 
    <nav class="navbar navbar-default" id="mNavbar"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" id="toggle"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#section2">Services</a></li> 
      <li><a href="#section3">Contact</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 
    </div> 

Answer 1

Bootstrap 3 имеет класс .navbar-fixed-top, который может быть применен к nav элемента прикреплен к верхней части страницы. Он работает со всеми базовыми функциями навигатора при разных размерах экрана. Существует пример как часть официального documentation.

<nav class="navbar navbar-default navbar-fixed-top" id="mNavbar">

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

$(document).ready(function() { 
 
    var $navbar = $("#mNavbar"); 
 
    
 
    AdjustHeader(); // Incase the user loads the page from halfway down (or something); 
 
    $(window).scroll(function() { 
 
     AdjustHeader(); 
 
    }); 
 
    
 
    function AdjustHeader(){ 
 
    if ($(window).scrollTop() > 60) { 
 
     if (!$navbar.hasClass("navbar-fixed-top")) { 
 
     $navbar.addClass("navbar-fixed-top"); 
 
     } 
 
    } else { 
 
     $navbar.removeClass("navbar-fixed-top"); 
 
    } 
 
    } 
 
});

body{ 
 
    position: relative; 
 
    display: block; 
 
    height: 1000px; 
 
    overflow-y: scroll; 
 
} 
 

 
.navbar{ 
 
    top: 60px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <nav class="navbar navbar-default" id="mNavbar"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" id="toggle"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#section2">Services</a> 
 
      </li> 
 
      <li><a href="#section3">Contact</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</div>

Я не уверен, что вы имеете в виду, пропиткой добавляется в верхней и нижней части, но вы можете просто переопределить CSS, добавив .navbar-fixed-top в таблицу стилей после того, как Bootstrap и обновление значений дополнений. Может быть значение top CSS, которое перемещает навигационную панель от верхней части экрана, вы можете решить это, установив top на 0.

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

Answer 2

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

<nav class="navbar navbar-default navbar-fixed-top" id="mNavbar"> 

https://jsfiddle.net/nyd7sd1q/