Bootstrap монитор прокрутки (Scrollspy) виджет

Свиток монитор (Scrollspy) плагин, который автоматически обновляет навигации виджет автоматически обновляет соответствующую цель навигации на основе положения полосы прокрутки. Основная реализация по мере прокрутки, полосы прокрутки позиция на основе.active класса добавляется к панели навигации.

Если вы хотите обратиться к отдельным подключаемых функций, вам нужно ссылаться наscrollspy.js.Или, как Bootstrap плагин Обзор упоминается в главе, вы можете обратиться кbootstrap.jsили сжатой версииbootstrap.min.js.

использование

Вы можете добавить свиток к верхней части поведения навигации монитора:

• Спомощью атрибута данных: вы хотите слушать к элементу ( как правило, тела) , чтобы добавить данные шпиона = "прокрутки".Затем добавить идентификатор или класс родительского элемента сBootstrap .nav компонента данных атрибутов-мишени.Для того, чтобы работать должным образом, вы должны убедиться, что есть совпадение в теле страницы, которую вы хотите связать элемент ID монитора существует.

  <Тело данных шпиона = "прокручивать" данных целевых = ". Navbar-пример">
  ...
  <Div класс = "NavBar-пример">
  	<UL класс = "нав нав-табс">
  		...
  	</ UL>
  </ Div>
  ...
  </ Body>
  

• По JavaScript: Вы можете прокрутить вызова JavaScript , чтобы слушать, слушать , чтобы выбрать элементы, а затем вызвать .scrollspy ()функции:

  . $ ( 'Body') scrollspy ({цель: '.navbar-пример'})
  

примеров

Следующий пример демонстрирует использование прокрутки данных атрибутов монитора (Scrollspy) плагин:

Результаты следующие:

опции

Для того, чтобы пройти через атрибуты данных или JavaScript. В следующей таблице перечислены следующие параметры:

способ

$ ( '[Data-шпиона = "прокручивать"]'). Каждая (функция () {
  переменная $ шпионский = $ (это) .scrollspy ( "Обновить")
})

примеров

Следующий пример демонстрирует.scrollspy ( "обновить") метод:

Результаты следующие:

событие

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

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // 执行一些动作...
})

примеров

Следующий пример демонстрирует использованиеactivate.bs.scrollspy события:

Результаты следующие:

Другие примеры

Создание горизонтальной прокрутки прослушивания

В следующем примере показано, как создать горизонтальной прокрутки слушателя:

Как создать вертикальную прослушивания прокрутки

В следующем примере показано, как создать вертикальную линейку прокрутки слушателя: