Сделать прокрутку NavBar Stick в верхней части браузера в Bootstrap

Question

Я новичок в Twitter Bootstrap и хочу иметь NavBar у основания глубокого MastHead и когда пользователь вертикально прокручивает страницу, а NavBar попадает в начало страницы, измените стиль так, чтобы NavBar стал фиксированным. Эффект, который я хочу, тот же, что и http://www.happycog.com/, только с помощью Bootstrap NavBar.

Итак, реальный вопрос заключается в том, как запускать стиль navbar-fixed-top, когда NavBar прокручивается до позиции 0, т.е. вершины браузера.

Любые идеи или указатели будут оценены. Спасибо.

Answer 1

Для этого вам нужно будет использовать javascript. Вот решение, которое полагается на jQuery, чтобы преобразовать позиционирование навигатора в фиксированное, как только оно попадает в верхнюю часть страницы, а также вставить временный div на свое место, чтобы предотвратить изменение макета.

http://jsfiddle.net/T6nZe/

Answer 2

Вы можете попробовать CSS3 липкое положение:

.sticky { 
    position: sticky; 
    top: 10px; /* When the element reaches top: 10px, it becomes fixed. */ 
    z-index: 100; 
} 

Browser поддержка: http://caniuse.com/#feat=css-sticky

Answer 3

В прицеливания для совместимости браузера, следующий может быть больше пользы.

.sticky { 
    position: -webkit-sticky; 
    position: -moz-sticky; 
    position: -ms-sticky; 
    position: -o-sticky; 
    position: sticky; 
    top: 10px; 
    z-index: 100; 
} 

Answer 4

Класс CSS navbar-fixed-top - это то, что вы хотите добавить.

Вот пример:

<nav class='navbar navbar-inverse navbar-fixed-top sticky' role='navigation'> 
    <!-- nav content --> 
</nav> 

Answer 5

Я считаю, что это то, что вы ищете: http://www.w3schools.com/bootstrap/bootstrap_affix.asp