Документация по начальной загрузке по этой теме меня немного смущает. Я хочу добиться аналогичного поведения, как в документах, с помощью аффиксовой панели навигации: панель навигации находится под заголовком абзаца / страницы, и при прокрутке вниз она должна сначала прокручиваться, пока не достигнет верхней части страницы, а затем закрепить там для дальнейших прокруток .
Поскольку jsFiddle не работает с концепцией навигационной панели, я создал отдельную страницу для использования в качестве минимального примера: http://i08fs1.ira.uka.de/~s_drr/navbar.html
Я использую это как свою панель навигации:
<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<a class="brand" href="#">My Brand</a>
This is my navbar.
</div>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
Я думаю, что я хотел бы data-offset-top
иметь значение 0 (поскольку полоса должна «держаться» до самого верха », но с 50 есть по крайней мере некоторый наблюдаемый эффект.
Если также поместить код javascript на место:
<script>
$(document).ready (function (){
$(".navbar").affix ();
});
</script>
Любая помощь приветствуется.
источник
.navbar-fixed-top
вместо affix ()?.navbar-fixed-top
поместит Navbar к вершине все время . Я хочу, чтобы заголовок страницы НАД панелью навигации, и при прокрутке вниз (и, таким образом, панель навигации будет прокручиваться), он должен оставаться наверху - тогда и только тогда. Документы Bootstrap использовали те же механизмы, что и subnav в своих предыдущих документах, но, к сожалению, они удалили его для документов 2.1.0.)};
должно быть});
Ответы:
У меня была аналогичная проблема, и я считаю, что нашел улучшенное решение.
Не беспокойтесь об указании
data-offset-top
в вашем HTML. Вместо этого укажите его при вызове.affix()
:Преимущество здесь в том, что вы можете изменить макет своего сайта без необходимости обновлять
data-offset-top
атрибут. Поскольку при этом используется фактическая вычисленная позиция элемента, это также предотвращает несоответствия с браузерами, которые отображают элемент в немного другой позиции.Вам все равно нужно будет закрепить элемент сверху с помощью CSS. Кроме того, мне пришлось установить
width: 100%
элемент nav, поскольку.nav
элементы сposition: fixed
некорректным поведением по какой-то причине:И последнее: когда прикрепленный элемент фиксируется, его элемент больше не занимает места на странице, в результате чего элементы под ним «прыгают». Чтобы предотвратить это уродство, я оборачиваю панель навигации в элемент
div
, высоту которого я установил равной высоте панели навигации во время выполнения:.
Вот обязательный jsFiddle, чтобы увидеть его в действии .
источник
Только что реализовал это впервые, и вот что я нашел.
data-offset-top
Значение количество пикселей , которое необходимо прокручивать для того , чтобы проставления эффекта иметь место. В вашем случае после50px
прокрутки класс вашего элемента меняется с.affix-top
на.affix
. Вы, вероятно, захотите приступитьdata-offset-top
к130px
делу в своем варианте использования.Как только произойдет это изменение класса, вы должны разместить свой элемент в css, задав стиль позиционирования для класса
.affix
. Bootstrap 2.1 уже определяет ,.affix
какposition: fixed;
так все , что вам нужно сделать , это добавить свои собственные значения позиции.Пример:
источник
.navbar
класс сохраняется - вы уверены?Чтобы исправить эту проблему, я модифицировал плагин affix, чтобы генерировать событие jQuery, когда объект прикреплен или не прикреплен.
Вот запрос на перенос: https://github.com/twitter/bootstrap/pull/4712
И код: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js
А затем сделайте это, чтобы прикрепить навигационную панель:
источник
Вам нужно удалить
.affix()
из вашего скрипта.Bootstrap в
data-attributes
большинстве случаев дает возможность выполнять задачи либо через JavaScript, либо прямо.источник
Я получил это из исходного кода twitterbootstrap, и он работает очень хорошо:
HTML:
CSS:
JS:
источник
Вам просто нужно удалить скрипт. Вот мой пример:
источник
Спасибо Намуолу и Дэйву Кисс за решение. В моем случае у меня была небольшая проблема с высотой и шириной навигационной панели, когда я использовал плагины afflix и collapse вместе. Проблема с шириной легко решается унаследовав ее от родительского элемента (в моем случае - контейнера). Также мне удалось заставить его плавно схлопываться с помощью небольшого количества javascript (на самом деле coffeescript). Хитрость заключается в том, чтобы установить высоту обертки до того,
auto
как произойдет переключение сворачивания, и исправить ее обратно после.Разметка (хамл):
CSS:
Кофейный скрипт:
источник
Мое решение для прикрепления навигационной панели:
источник
Как и в принятом ответе, вы также можете сделать что-то вроде следующего, чтобы сделать все за один раз:
Это не только вызывает
affix
плагин, но и оборачивает прикрепленный элемент в div, который поддерживает исходную высоту навигационной панели.источник