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

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

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

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

Ответ 1

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

Вот пример:

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

Ответ 2

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

http://jsfiddle.net/T6nZe/

Ответ 3

Вы можете использовать липкую позицию CSS3:

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

Поддержка браузера: http://caniuse.com/#feat=css-sticky

Ответ 4

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

Ответ 5

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

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