Дополнительный плагин навигации (Affix) позволяет закреплять <div> где -то на странице. Вы также можете переключиться между включением или выключением, используя плагин. Общим примером являются социальные значки. Они начнутся где -то, но когда страница нажимает на отметку, <div> где -то заблокируется и не будет прокручивать вместе с остальной частью страницы.
Если вы хотите ссылаться на функциональность плагина отдельно, вам необходимо ссылаться на Affix.js.
1. Использование
Дополнительные навигационные (аффикс) плагины могут использоваться с помощью свойств данных или с помощью JavaScript.
1. С помощью атрибутов данных: если вам нужно добавить дополнительное навигационное (аффиксное) поведение в элемент, вам нужно только добавить Data-spy = «Affix» к элементу, который вам необходимо прослушать. Используйте смещения, чтобы определить, когда блокировка и движение переключайте элементы.
2. через Javascript: вы можете вручную добавить дополнительную навигацию в элемент через JavaScript (Affix)
2. позиционирование через CSS
В обоих вышеупомянутых способах использования подключаемого модуля Affix необходимо найти контент через CSS. Дополнительные навигационные (аффиксные) подключаемые переключатели между тремя классами, каждый из которых представляет определенное состояние: .affix, .affix-top и .affix-bottom. Пожалуйста, следуйте приведенным ниже шагам, чтобы настроить свой собственный CSS для этих трех состояний (не полагаясь на этот плагин).
1. В начале плагин добавляет .ffix-top, чтобы указать элемент в его самой верхней позиции. В настоящее время позиционирование CSS не требуется.
2. При прокрутке через элементы с дополнительной навигацией (Affix) добавлено фактическая дополнительная навигация (аффикс). В настоящее время. Affix заменит .ffix-top и устанавливает позицию: исправлена; (Предоставлено кодом CSS от Bootstrap).
3. Если определено нижнее смещение, когда прокрутка достигает этой позиции, замените .affix. Поскольку смещение является необязательным, если смещение установлено, необходимо установить соответствующий CSS. В этом случае добавьте позицию: абсолютно; При необходимости.
3. Варианты
Есть некоторые варианты, передаваемые через свойства данных или JavaScript. В следующей таблице перечислены эти параметры:
IV Примеры
Дополнительная навигация означает вставку его где -то на экране, чтобы реализовать функцию привязки.
1. Основные примеры
<Body Data-spy = "scroll" data-target = "#myscrollspy"> <div> <div style = "height: 150px"> <h1> bootstrap </h1> </div> <div> <div id = "myscrollspy"> <ul data spy = "Affix" offset-top = "150"> <li> <li> <li> <a href = "##"#"#". </li> <li> <a href = "#section-2"> Часть 2 </a> </li> <li> <a href = "#section-3"> Часть 3 </a> </li> <li> <a href = "#раздел-4"> Часть 4 </a> </li> <li> <a href = "#section-4"> Часть 5 </a> </li> <li> <a href = "#dips-4" <H2 id = "Раздел 1"> Часть 1 </h2> <p> ... </p> <h2 id = "Раздел 2"> Часть 2 </h2> <p> ... </p> <h2 id = "Раздел-3"> Часть 3 </h2> <p> ... </p> <h2 id = "раздел-4"> Часть 4 </h2> <p> ... </p> <h2 id = "раздел-4" 4 </h2> <p> ... </p> </div> </div> </div>
2. CSS часть навигации
ul.nav-pills {width: 200px;} ul.nav-pills.affix {top: 30px;} // javaScript вместо data spy = "Affix" Data Offet-Top = "125" $ ('#myaffix'). Affix ({Offset: {top: 150}))Мы используем топ по умолчанию, и, конечно, мы также можем использовать дно по умолчанию. Этот метод позиционирования напрямую расположен через CSS.
// Установка в notherul.nav-tabs.affix-bottom {внизу: 30px;} // установить в нижнюю $ ('#myaffix'). Affix ({offset: {note: 150}})Аффикс содержит несколько событий, следующим образом:
// другие аналогичные $ ('#myaffix'). On ('Affixed-top.bs.affix', function () {alert ('Trigger!');});Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.