В этой статье в основном изучается плагин JavaScript - прокрутка прослушивания.
1. Дело
Плагин для прослушивания прокрутки может автоматически обновлять соответствующие навигационные оценки в соответствии с положением полосы прокрутки. Вы можете попробовать прокрутить эту страницу и увидеть изменения в навигации слева.
Сначала включите реализованный код, вы можете проверить эффект, тестируя код.
<! Doctype html> <html> <head> <title> bootstrap </title> <meta name = "viewport" content = "width = width Device, начальная шкала = 1.0"> <!-Bootstrap-> <Link href = "css/bootstrap.min.css" rel = "stilesshiet" media = "> <>-[i. src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <style type = "text/css"> .scrollspy-example {height: 200px; переполнение: авто; позиция: относительно; Граница: 1px твердый красный; } </style> </head> <body><div > <nav id="navbar-example" role="navigation"> <div> <button type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href = "#"> Имя проекта </a> </div> <div> <ul> <li> <a href = "#fat">@fat </a> </li> <li> <a href = "#mdo">@mdo </a> </li> <li> <a href = "#" "#" = "NAVBARD" "/li> <li> <a href ="#""#"=" vAvbard "> </li> <li> <href ="#"#". <b> </b> </a> <ul rol = "menu" aria-labelledby = "navbardrop1"> <li> <a href = "#One" tabIndex = "-1"> One </a> </li> <li> <a href = "#two" tabindex = "-1"> </i> </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> tabIndex = "-1"> Three </a> </li> </ul> </li> </li> </li> </li> </div> </nav> <div Data Offset = "0" data-spy = "scroll" data-target = "#vavbar-example"> <h4 id = "fat">@fat </h4> <f> ad legrings key-legrings art-art-art-art-artar ortar art-artar artr Pitchfork YR Enim Lo-Fi, прежде чем они распродали Qui. Tumblr Farm-to-Table Bicycle Rights. Anime Keffiyeh Carles Cardigan. ФОТО СУБИНА СЕЙТАН МАКСИИНИ СЕЙТАН МАКСВИИН 3 Вольф Луны Ирур. Косби Свитер Ломо Джин Шорты, Уильямсбургская толстовка с капюшоном. Nihil Tattooed Accusamus, Cred Irony Biodiesel Keffiyeh Artisan ullamco. Freegan Bear Aliqua Cupidat McSweeney's Vero. Cupidat Four Loko Nisi, Ea Helvetica Nulla Carles. Татуированный Cosby Sweater Food Truck, McSweeney's Quis non Freegan Vinyl. Lo-Fi Wes Anderson +1 Sartorial. Carles non Aesthetic упражнения Quis gentrify. Brooklyn Adipisucation Craft Beer Deserunt. FAP Craft Beer Deserunt Skateboard EA. Lomo Bicycle Rights Apising Banh Mi, Velit Ea Sunt Next Location Locavore Coffee в Magna Venia. High Life ID винил, Echo Park Sevening at Quis aliquip banh mi pitchfork. Vero VHS est Adipising. Consectetur nisi Diy Minimum Messenger Bag. Cred Ex in, устойчивый Delectus состоит из Fanny Pack iPhone. Excepteur VHS Elit, профиль Shoreditch +1 биодизельное ремесленное пиво. Однооригенные кофейные дорожки Ирре четыре Локо, Купидат Терри Ричардсон Мастер Дейлс. Предполагайте, вы, вероятно, не слышали о них художественной вечеринки Fanny Pack, Tattooed Nulla Cardigan Temporal Ad. ПРОВАННЫЙ ВОЛОК НЕССИОНТ САРТАРИИ Кеффие ЕС Банх М.И. Elit Wolf Valuptate, Lo-Fi Ea Portland, прежде чем они распродали четыре Локо. Locavore enim nostrud mlkshk brooklyn nesciunt. </P> <h4 id = "three"> три </h4> <p> ad Leggings KeyTar, бренч -идентификатор Art Party Dolor Labour. Pitchfork YR Enim Lo-Fi, прежде чем они распродали Qui. Tumblr Farm-to-Table Bicycle Rights. Anime Keffiyeh Carles Cardigan. ФОТО СУБИНА СЕЙТАН МАКСИИНИ СЕЙТАН МАКСВИИН 3 Вольф Луны Ирур. Косби Свитер Ломо Джин Шорты, Уильямсбургская толстовка с капюшоном. Nihil Tattooed Accusamus, Cred Irony Biodiesel Keffiyeh Artisan ullamco. Sapiente Synth Id Assumenda. Locavore sed helvetica cliche ирония, Thundercats, вы, вероятно, не слышали о них, следующий за капюшоном без глютена. Лейбористская Элита Место перед тем, как они распроданы, профиль -бранч Терри Ричардсон Парчан Свитер Кесби Кесби Кеффий Ют Хельветика. Cardigan Craft Beer Seitan готовится к Velit. VHS Chambray Labys Tempreary Veniam. Anim Mollit Минимальный Commodo Ullamco Thundercats. </p> </div> </div> <script src = "js/jquery-2.0.3.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </body> </html>Использование 1- через атрибут данных
Добавив его в Div для элементов страницы, которые вам нужно выслушать (обычно), но добавив их в Div, вы можете увидеть код самостоятельно. Затем добавьте атрибут data-spy = "scroll" в Div, чтобы легко добавить функцию прокрутки слушания в верхнюю панель навигации. Затем добавьте к нему атрибут Target Data, значение этого атрибута-это идентификатор или класс родительского элемента компонента .NAV в любой начальной загрузке.
Скопируйте код следующим образом: <div Data Offset = "0" data-spy = "scroll" data-target = "#navbar-example">
...........
</div>
Адрес ссылки на навигации должен иметь соответствующую цель
Адрес ссылки в панели навигации должен иметь соответствующий элемент страницы с тем же значением идентификатора.
Использование 2-- через JavaScript
Начните прокручивать прослушивание через JavaScript:
<script type = "text/javascript"> $ (function () {$ ('.. Scrollspy-Example'). Scrollspy ({target: '#navbar-example'});}) </script>Удалите его свойство, нацеленное на данные, поместив класс стилей в качестве Scrollspy-Example Div. Это также позволяет переключить колесо мыши.
2. Метод
.scrollspy ('обновить')
При использовании плагина прослушивания прокрутки, этот метод должен вызывать всякий раз, когда элемент страницы добавляется или удаляется из DOM на странице, следующим образом:
Скопируйте код кода следующим образом: $ ('[data-spy = "scroll"]'). Каждый (function () {var $ spy = $ (this) .scrollspy ('rebresh')})
3. Варианты
Варианты могут быть переданы через свойства данных или JavaScript. Для атрибутов данных вам необходимо разместить имя опции после данных, например, data-oftses = "".
4. События
<script type = "text/javascript"> $ ('#vavbar-example'). On ('active.bs.scrollspy', function () {alert (1);}) </script>Наконец, примечание: конечно, вам нужно добавить полосы прокрутки в содержание мониторинга прокрутки, то есть вам нужно заранее добавить стили.
<style type = "text/css"> .scrollspy-example {height: 200px; переполнение: авто; позиция: относительно; Граница: 1px твердый красный; } </style>Дайте Div Content определенную высоту.
Выше приведены примечания к обучению для начальной прокрутки и мониторинга, связанного с контентом. Если вы все еще хотите продолжить обучение начальной загрузке, вы можете нажать здесь, чтобы продолжить обучение. Я надеюсь, что это будет полезно для вашего обучения. Я также надеюсь, что вы продолжите обращать внимание на более захватывающий контент от wulin.com.