Плагин мониторинга прокрутки (Scrollspy), то есть автоматическое обновление плагина навигации, автоматически обновляет соответствующую целевую навигацию в соответствии с положением полосы прокрутки. Его базовая реализация - добавить. Active Class в панель навигации на основе позиции прокрутки прокрутки во время прокрутки.
Если вы хотите ссылаться на функциональность плагина отдельно, вам необходимо ссылаться на Scrollspy.js. Или, как упомянуто в главе обзора плагинов Bootstrap, вы можете обратиться к Bootstrap.js или сжатым версиям Bootstrap.min.js.
1. Использование
Вы можете добавить поведение прослушивания промокания в верхнюю навигацию:
1. Через атрибут данных: добавьте DATA-SPY = "Свитка" в элемент, который вы хотите прослушать (обычно тело). Затем добавьте цель атрибута данных с идентификатором родительского элемента компонента Bootstrap .NAV или свойства класса. Чтобы он работал должным образом, вы должны убедиться, что в теле страницы есть элементы, которые соответствуют идентификатору ссылки, которую вы хотите прослушать.
<body Data spy = "scroll" data-target = ". Navbar-Example"> ... <Div> <ul> ... </ul> </div> ... </body>
2. Через JavaScript: вы можете вызвать мониторинг прокрутки через JavaScript, выберите элемент, который нужно слушать, а затем вызовать функцию .scrollspy ():
$ ('body'). scrollspy ({target: '.navbar-example'})
2. Прокрутите мониторинг
Плагин для прослушивания провинции используется для автоматического обновления элементов навигации в зависимости от позиции, где расположена полоса прокрутки, и отображать элементы навигации.
// Основной пример <NAV ID = "NAV"> <a href = "#"> веб-разработка </a> <ul> <li> <a href = "#html5"> html5 </a> </li> <li> <a href = "#bootstrap"> bootstrap </a> </li> <li> <a href = "#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" <pan> </span> </a> <ul> <li> <a href = "#jquery"> jquery </a> </li> <li> <a href = "#yui"> yui </a> </li> <li> <a href = "#extjs"> extjs </a> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> data-offset = "0" data-target = "#Nav" data-spy = "scroll" style = "Высота: 200px; переполнение: Auto; позиция: относительно; прокладка: 0 10px;"> <H4 id = "html5"> html5 </h4> <p> Приложение HTML под стандартным Universal Langue After Html4.0119, выпущенный в Subsement, выпущенный в Subsement 1999. HTML5 и другие стандарты остались позади. Чтобы содействовать разработке движения веб-стандартизации, некоторые компании объединили свои усилия для создания рабочей группы по технологии веб-гипертекстовых приложений (веб-организация рабочей группы гипертекстовых приложений Whatwg. Что посвящено веб-формам и приложениям, в то время как W3C (World Wide Web Consortium) фокусируется на XHTML2.0. ID = «Bootstrap»> Bootstrap </H4> <p> Bootstrap, из Twitter, в настоящее время является очень популярной фронтальной структурой Спецификации HTML и CSS, написанные в Dynamic CSS-языке. </p> <h4 id = "jquery"> jquery </h4> <p> jQuery - еще одна превосходная библиотека JavaScript после прототипа. IE6/7/8 браузер. HTML-содержание, то есть в HTML, не нужно вводить кучу JS. Дождь, это ошеломляет ID = "extjs"> extjs </h4> <p> может использоваться для разработки RIA, то есть Ajax приложения богатых клиентов. Первоначально был основан на технологии Yui и разработал депутат-декорук
Есть два важных атрибута, как показано на рисунке ниже:
PS: в меню и в простом времени, нацеливание данных также может быть стабильной, чтобы реализовать выделение мониторинга прокрутки без настройки. Но когда вы не связываете один из них при нескольких навигациях, это вызовет ошибку, поэтому обычно ее необходимо добавить.
Если вы используете метод сценариев JavaScript, вы можете удалить Data-* и использовать определения атрибутов скрипта: смещение, шпион и цель. Конкретные методы следующие:
// Определить свойство $ ('#content'). Scrollspy ({offset: 0, target: '#nav',});Существует также событие, чтобы переключиться на новую запись.
// события связаны с навигацией
$ ('#Nav'). On ('active.bs.scrollspy', function () {
оповещение («Это событие запускается после активации новой записи!»);
});
Существует также способ обновить контейнер DOM при прослушивании прокрутки.
// HTML Part
<section> <h4 id = "html5"> html5 <a href = "#" onclick = "removesec (this)"> Удалить это </a> </h4> <p> ... </p> </section>
// При удалении содержания обновите DOM, чтобы избежать смещения мониторинга навигации
функция removesec (e) {$ (e) .parents ('. Sec'). remove (); $ ('#Content'). Scrollspy ('refresh');}Примечание. Этот метод должен использовать Data-* Declarative.
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.