Scrollspy
Триггер событий и анимации при прокрутке страницы.
Использование
В scrollspy компонент слушает прокрутки страницы и триггеры событий на основе положения прокрутки. Например, если вы прокрутите страницу вниз, и элемент появится в первый раз в области просмотра вы можете вызвать плавная анимация исчезать в элемент. Просто добавить data-uk-scrollspy
атрибут и следующие варианты.
Данные атрибут | Описание |
---|---|
cls:'MY-CLASS' |
Применяется в классе только первый раз, когда элемент появляется в окне просмотра. |
repeat: true |
Применяется классе каждый раз, когда элемент отображается в области просмотра. |
delay:600 |
Добавляет задержку в миллисекундах для анимации. |
Как правило, классы с Анимация компонент используются вместе с scrollspy.
Примеры
В этом примере используется параметр repeat: true
опция. Прокрутка вверх и вниз, чтобы увидеть вызов анимации.
Увядает
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Масштабирование вверх
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Свернуть
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Топ-слайд
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Дно скольжения
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Скольжение вправо
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Проведите пальцем влево
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Разметки
<div data-uk-scrollspy="{cls:'uk-animation-fade'}">...</div>
<div data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">...</div>
<div data-uk-scrollspy="{cls:'uk-animation-fade', delay:900}">...</div>
Групп
Вы также можете сгруппировать scrollspy элементами, так что вам не придется применять данные атрибута для каждого из них. Просто добавить data-uk-scrollspy"{target:'MY-CLASS'}"
атрибут в элемент-контейнер, в которой использовался селектор элементы, которые вы хотите анимировать внутри контейнера. При использовании задержки он будет применен к совокупности предметов в пределах строку, которая прокручивается в поле зрения. Задержка сбросится для следующей строки внутри группы, когда она прокручивается в поле зрения.
Пример
Пункт
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Пункт
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Пункт
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Пункт
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Пункт
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Пункт
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Пункт
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Пункт
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Пример
<div data-uk-scrollspy="{cls:'uk-animation-fade', target:'.my-class', delay:300}">
<!-- This item has no delay -->
<div class="my-class">...</div>
<!-- This item has a delay of 300ms -->
<div class="my-class">...</div>
<!-- This item has a delay of 600ms -->
<div class="my-class">...</div>
</div>
JavaScript варианты
Это пример того, как устанавливать параметры через атрибут:
data-uk-scrollspy="{cls:'uk-animation-fade'}"
Вариант | Возможное значение | По умолчанию | Описание |
---|---|---|---|
cls |
string | 'uk-scrollspy-inview' | Класса, чтобы добавить, когда элемент находится в поле зрения. |
initcls |
string | 'uk-scrollspy-init-inview' | Класса, чтобы добавить, когда элемент находится в поле зрения впервые. |
topoffset |
integer | 0 | Верхний отступ перед выпадением в поле зрения. |
leftoffset |
integer | 0 | Смещение слева, перед выпадением в поле зрения. |
repeat |
boolean | false | Применяется в классе каждый раз, когда элемент отображается в области просмотра. |
delay |
integer | 0 | Время задержки в мс. |
События
Вы можете привязать обратные вызовы для следующих событий для пользовательских функций:
Название | Описание |
---|---|
init.uk.scrollspy |
Инициируется, когда элемент изначально находится в области просмотра. |
inview.uk.scrollspy |
Инициируется, когда элемент находится в области просмотра. |
outview.uk.scrollspy |
Инициируется, когда элемент покидает просмотра. |
Пример
$('[data-uk-scrollspy]').on('inview.uk.scrollspy', function(){
// custom code...
});
Scrollspy Nav
Для автоматического обновления активного пункта меню в меню в зависимости от положения прокрутки вашего сайта, просто добавьте атрибут Data data-uk-scrollspy-nav
для любой навигации. Каждый пункт меню должен ссылка на идентификатор соответствующей части сайта.
Данные атрибут | Описание |
---|---|
data-uk-scrollspy-nav |
Инициирует JavaScript необходимых для функциональности scrollspy нав. |
data-uk-scrollspy-nav="{closest:'MY-SELECTOR'}" |
Ищет ближайший элемент, соответствующий селектору путем тестирования самого элемента и проходящих через его предков в DOM дерево. |
data-uk-scrollspy-nav="{smoothscroll:true}" |
Применяет Плавная прокрутка компонента при переходе между разными разделами сайта. |
data-uk-scrollspy-nav="{cls:'MY-CLASS'}" |
По умолчанию ScrollspyNav переключает uk-active класс. Используйте cls возможность использовать собственное имя класса. |
Пример scrollspy nav, просто проверить наши Scrollspy тестовую страницу.
Разметки
<ul class="uk-nav uk-nav-side" data-uk-scrollspy-nav="{closest:'li', smoothscroll:true}">
<li><a href="#my-id">...</a></li>
<li><a href="#my-id2">...</a></li>
</ul>
<div id="my-id">...</div>
<div id="my-id2">...</div>
JavaScript варианты
Это пример того, как устанавливать параметры через атрибут:
data-uk-scrollspy-nav="{smoothscroll:true}"
Вариант | Возможное значение | По умолчанию | Описание |
---|---|---|---|
cls |
string | 'uk-active' | Чтобы добавить класс для активного элемента |
closest |
CSS selector | false | Селектор элемента, к которому применяется активный класс |
topoffset |
integer | 0 | Прокрутите топ-offsset |
leftoffset |
integer | 0 | Прокрутка влево-offsset |
smoothscroll |
boolean | false | Прокрутки анимации |
События
Название | Параметр | Описание |
---|---|---|
init.uk.scrollspy |
event | На scrollspy первой инициализации |
inview.uk.scrollspy |
event | Элемент вошел посмотреть-порт |
outview.uk.scrollspy |
event | Элемент вид слева-порт |