введение
При написании блога многие субтитры часто используются для организации. Когда статья длинная, вам нужно перетаскивать между разными названиями. Если вы добавите каталог вручную и добавите точку привязки, это действительно хлопотно. По этой причине вы можете динамически генерировать область каталога и использовать плагин Affix, предоставленный Bootstrap, чтобы исправить область каталога на странице. Начальная документация использует его
Подготовка - Представление Bootstrap.min.js
Поместите Bootstrap.min.js в тег сценария перед телом, и uikit.min.js не будет представлен в настоящее время.
После введения связанных плагинов наша идея состоит в том, чтобы сначала автоматически генерировать точки привязки и содержание меню на основе статьи, затем добавить к ней аффикс для создания фиксированного эффекта, а затем использовать плагин Scrollspy Uikit (в начальной загрузке также есть Scrollspy, и метод использования почти одинаково).
Ввести обучение использованию аффикса
Плагин Affix помогает нам установить положение навигационной части и добавить вертикальные смещения в фиксированные элементы в соответствии с ситуацией прокрутки пользователя, чтобы переключатели навигации между тремя классами:
1.faffix-top: указывает на верхнюю часть
2.Faffix: означает прокручивать страницу, добавить фиксированные атрибуты и использовать пользовательские смещения
3.Faffix-Bottom: означает достижение дна
Для включения аффикса требуется только следующий код:
$ ('#Nav'). Affix ({Offset: {top: $ ('header'). offset (). Top, внизу: ($ ('looter'). OuterHeight (true) + $ ('. Application'). OuterHeight (true)) + 40}});1. Организовать детали кода HTML
<ul id = "mysidebar"> </ul>
Обязательно добавьте классы NAV и Affix для UL.
2. Сгенерировать код инкапсуляции
Представьте этот фрагмент кода в свой собственный скрипт сценария
; $. fn.extend ({"createaffix": function (selector) {$ list = $ ("" + selector), length = $ list.length, affixvalue = ""; for (var i = 0; i <length; i ++) {// Добавить атрибут $ list.eq (i) .attr ("id", ("node); $ list.eq (i) .Text (); this.append (AffixValue);Принцип вышеуказанного кода состоит в том, чтобы пройти в тег или класс, который необходимо считать единицей заголовка для функции Createaffix, и добавить к нему ссылки в течение процесса обхода.
3. Как использовать
Написание HTML Parts
<ul id = "mysidebar"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </a> </li> <li> <a href = "#node3"> </a> </li> </ul> <h3 id = "node1"> title 1 </h3> </h3> </h3> </h3> </h3> </h3> </h3> </h3> </h3> </h3> </h3 "node 1 </h3> </ul> <h3 id =" node1 "> 2 </h3> <h3 id = "node3"> заголовок 3 </h3>
Написание раздела JavaScript
$ (function () {$ ('#mysidebar'). createaffix ('h3'); // Укажите, что в статье `h3` Tag должен быть добавлен в якорь.});Решить проблему смещения точки привязки
Поскольку точка якоря по умолчанию смещает страницу в верхнюю часть элемента якоря, то есть, если мы выполняем вышеуказанную операцию на заголовке 1, когда мы нажимаем на точку якоря, страница перейдет в верхнюю позицию, где находится заголовок 1 ». Если наверху есть строка меню, она будет заблокирована и решена путем установки стиля CSS.
.class { /* Добавление прокладки может привести к тому, что якорь сдвигает число PX вниз, то есть пропустить высоту стержня меню. Компенсировать пустую часть, вызванную заполнением, установив маржинаторную версию до отрицательного значения*/ padding-top: num px; Margin -Top: -num px;}Добавьте прокрутку прослушивания
В настоящее время наша документация DOM такая.
<ul id = "mysidebar"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </a> </li> <li> <a href = "#node3"> </a> </li> <li> <a href = "#node3"
Обработайте его, представьте атрибут uikit и проверьте документ для получения подробной информации
<ul id = "mysidebar" data-uk-scrollspy-nav = "{ближайший: 'li', smoothscrool: true}"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </a> </li> <li> <a href = "#node2"Представьте uikit.min.js
Поскольку наше пункт меню (LI) выполняется после загрузки документа, если Scrollspy of Uikit будет выполнен до создания элемента меню, он определенно не будет работать. Поэтому нам нужно представить uikit.min.js после создания пункта меню. Код заключается в следующем:
$ (function () {$ ('#mysidebar'). createaffix ('h3'); // генерировать меню $ .getscript ("uikit.min.js"); // загружать uikit.min.js asynchrony, и мониторинг прокрутки вступает в силу.});