Bootstrap JS Прикрепить
JS (Прикрепите. js)
Подключаемый модуль позволяет элементу становиться прикрепленным (заблокированным) к области на странице. Это часто используется с навигационными меню или социальных кнопок значок, чтобы сделать их "палкой" в определенной области во время прокрутки вверх и вниз по странице.
Плагин переключает это поведение и выключается (изменяет значение позиции CSS с static на fixed) в зависимости от положения прокрутки.
Плагин прикрепления переключает между тремя классами: .affix , .affix-top и .affix-bottom . Каждый класс представляет определенное состояние. Необходимо добавить свойства CSS для обработки фактических позиций, за исключением position:fixed .affix класса.
Для получения дополнительной информации ознакомьтесь с нашим учебником по загрузке.
Совет: Прикрепите плагин часто используется вместе с Скроллспи плагин.
Через Data-* атрибуты
Добавьте data-spy="affix" к элементу, который вы хотите шпионить, и data-offset-top|bottom="number" атрибут для вычисления положения прокрутки.
Пример
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Через JavaScript
Включить вручную с помощью:
Пример
$('.nav').affix({offset: {top: 150} });
Параметры прикрепления
Параметры могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра в Data-, как при смещении данных = "".
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| 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 ) |
Другие примеры
Прикрепленная навигационная
Создать горизонтальное прикрепленное навигационное меню:
Пример
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
Использование jQuery для автоматической прикрепления навигационной навигации
Используйте метод jQuery аутерхеигхт () для прикрепления навигационной навигации после того, как пользователь прокручивается мимо заданного элемента (< Header >):
Пример
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
Скроллспи & прикрепите
Использование плагина прикрепить вместе с плагином скроллспи :
Горизонтальное меню (навигационный)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Вертикальное меню (сиденав)
<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>
Анимированные навигационной навигации на прикрепить
Используйте CSS для манипулирования различными. прикрепить классы:
Пример-изменение цвета фона и отступа навигационной полосы при прокрутке
.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;
}
Пример-слайд в навигационной
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}
