JS Аффикс (affix.js)
Плагин позволяет Аффикс элемент, чтобы стать прикрепленной (заблокирован) к области на странице. Это часто используется с меню навигации или кнопки социальных значок, чтобы сделать их "пряника" в определенной области во время прокрутки вверх и вниз страницы.
Плагин переключает такое поведение и выключается (изменяет значение позиции CSS от статического к фиксированной), в зависимости от положения прокрутки.
Аффикс плагин позволяет переключаться между тремя классами: .affix , .affix-top , и .affix-bottom . Каждый класс представляет собой определенное состояние. Необходимо добавить свойства CSS для обработки фактические позиции, за исключением position:fixed на .affix классе.
Для получения дополнительной информации ознакомьтесь с Bootstrap аффикс Учебник .
Совет: Плагин Аффикс часто используется вместе с Scrollspy плагин.
Via data-* Атрибуты
Добавьте data-spy="affix" к элементу вы хотите , чтобы шпионить, и data-offset-top|bottom=" number " атрибут для вычисления положения прокрутки.
Через JavaScript
Включить вручную с помощью:
Наклейте Параметры
Параметры могут быть переданы с помощью атрибутов данных или JavaScript. Для атрибутов данных, добавьте имя параметра к данные-, так как в данных выносом = "".
| имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| offset | number | object | function | 10 | Определяет количество пикселей, чтобы смещение от экрана при расчете положения прокрутки. При использовании одного числа, смещение добавляется к верхней и нижней стороны. Если вы хотите , чтобы управлять верхней или нижней части, использовать объект, как и offset: {top:25} Для нескольких смещений, используйте offset: {top:25, bottom:50} Совет: Используйте функцию , чтобы динамически обеспечить смещение (может быть полезно для чувствительных конструкций) |
| target | selector | node | element | the window object | Задает целевой элемент аффиксом |
Наклейте События
В следующей таблице перечислены все доступные аффикс события.
| Мероприятие | Описание | Попробуй |
|---|---|---|
| affix.bs.affix | Происходит перед фиксированное позиционирование добавляется к элементу (например, когда .affix-top класс собирается быть заменен .affix классом) | Попробуй |
| affixed.bs.affix | Происходит после фиксированного позиционирования добавляется к элементу (например, после того , как .affix-top класса заменяется .affix классом) | Попробуй |
| affix-top.bs.affix | Происходит перед верхний элемент возвращается в исходное (нефиксированной) положении (например, .affix класс собирается быть заменен .affix-top ) | Попробуй |
| affixed-top.bs.affix | Происходит после того , верхний элемент возвращается в исходное (нефиксированной) положении (например, .affix класс был заменен .affix-top ) | Попробуй |
| affix-bottom.bs.affix | Возникает перед нижний элемент возвращается в исходное (нефиксированной) положении (например, .affix класс собирается заменить .affix-bottom ) | Попробуй |
| affixed-bottom.bs.affix | Происходит после того , как нижний элемент возвращается в исходное (нефиксированной) положении (например, .affix класс был заменен .affix-bottom ) | Попробуй |
Примеры
Приданные Navbar
Создание горизонтальной прикрепленную навигации по меню:
Использование JQuery для автоматического проставлять NavBar
Использование JQuery в outerHeight() метод , чтобы прикрепить NavBar после того, как пользователь прокрутил прошел заданный элемент (<header>) :
Scrollspy & Аффикс
Использование Аффикс плагин вместе с Scrollspy плагин:
Горизонтальное меню (Navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> Попробуй сам " Вертикальное меню (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills
nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body> Попробуй сам " Animated Navbar на аффиксом
Используйте CSS для управления различными .affix классы:
Пример - Изменение цвета фона и прокладка на навигационной панели прокрутки
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff
!important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
} Попробуй сам " Пример - Slide в навигационной панели
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
} Попробуй сам "