Подтвердить что ты не робот

Как активировать ссылки для Twitter Bootstrap Affix?

Я использую JS-компонент Twitter Bootstrap Affix. Мой список UL правильно прикрепляется, когда я прокручиваю страницу вниз. Также - когда я нажимаю на отдельные элементы списка (так же, как на странице Docs на Twitter), он прокручивается до моего идентификатора привязки в моем документе, но элемент LI не получает активный класс Twitter. Он также не получает "активный" класс, когда я просматриваю свой документ.

Я ожидал бы, что соответствующая ссылка будет активной, когда я прокручиваю ее в определенную часть документа (так же, как работает прокрутка spy), но я не могу заставить это работать.

Есть ли что-то особенное, которое мне нужно настроить, чтобы Bootstrap добавит "активный" класс, если это необходимо?

4b9b3361

ОТВЕТЫ

Ответ 1

Да, вам также нужно использовать плагин ScrollSpy. Вы можете активировать его через разметку или через JS. Если #scroll-pane быть элементом, который запускает события прокрутки, а #navbar - элемент, содержащий ul.nav, следующее должно заставить его работать:

HTML

<div id="scroll-pane" data-spy="scroll" data-target="#navbar">

JS

$('#scroll-pane').scrollspy({target: '#navbar'});

Используйте либо HTML, либо JS, но не оба.

Дополнительная информация

Когда плагин ScrollSpy передается цели, например scrollspy({target: '#navbar'}), это используется для создания селектора формы

target + ' .nav li > a'

который в этом примере даст

'#navbar .nav li > a'

Важно понимать условия, которые создает этот селектор.

  • Оригинальный target должен быть элементом, который содержит элемент с классом nav. Поэтому .nav, вероятно, никогда не будет вашей целью.
  • Элемент .nav должен содержать элементы списка.
  • Эти элементы списка должны иметь <a> как прямой дочерний элемент.

Элементы <a>, выбранные этим, затем отфильтровываются теми, чьи data-target или href начинаются с символа '#'. Эти href в свою очередь используются для выбора элементов, содержащихся в элементе, к которому подключен плагин ScrollSpy. Смещения выбранных сохраняются, и когда происходит прокрутка, выполняется сравнение текущего смещения прокрутки с сохраненными значениями, обновление соответствующего элемента <a> с помощью класса active.

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