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 Элемент вид слева-порт