Scrollspy

• Использование
• Группы
• JavaScript options
• Scrollspy Nav
• JavaScript Scrollspy Nav options

Использование

Компонент Scrollspy "прослушивает" прокрутку страницы и запускает события в зависимости от положения прокрутки. Например, если вы прокрутите страницу вниз, и элемент появится в окне просмотра в первый раз, вы можете запустить плавную анимацию для элемента. Что необходимо? Просто добавьте атрибут data-uk-scrollspy и следующие параметры.

Как правило, вместе с scrollspy, используются классы из компонента Animation .

Пример

В этом примере используется опция repeat: true. Прокрутите вверх и вниз, чтобы увидеть запущенную анимацию.

<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-* атрибут к каждому из них. Добавьте атрибут data-uk-scrollspy"{target:'MY-CLASS'}" к элементу контейнера, targetting селектор на элементы, которые вы хотите анимировать в контейнере. При использовании задержки она будет применена кумулятивно ^{*постепенно} к элементам в строке, которая прокручивается в поле зрения. Задержка будет сброшена для следующей строки в группе, когда она прокручивается в поле зрения.

Пример

Пример

<div data-uk-scrollspy="{cls:'uk-animation-fade', target:'.my-class', delay:300}">

    <!-- Эта штука не имеет задержки -->
    <div class="my-class">...</div>

    <!-- Эта штука имеет задержку 300 мс -->
    <div class="my-class">...</div>

    <!-- Эта штука имеет задержку 600 мс -->
    <div class="my-class">...</div>

</div>

JavaScript options

Это пример того, как установить параметры через атрибут:

data-uk-scrollspy="{cls:'uk-animation-fade'}"

Events

Вы можете привязать обратные вызовы ^*callbacks к следующим событиям для пользовательской функциональности:

Пример

$('[data-uk-scrollspy]').on('inview.uk.scrollspy', function(){
    // custom code...
});

Scrollspy Nav

Чтобы автоматически обновить активный пункт меню в меню в зависимости от позиции прокрутки вашего сайта, просто добавьте атрибут данных data-uk-scrollspy-nav в любую навигацию. Каждый пункт меню должен содержать ссылку на уникальный идентификатор (ID) соответствующей части сайта.

Пример навигации scrollspy nav можно увидеть на странице Scrollspy test page.

<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 options

Это пример того, как установить параметры через атрибут:

data-uk-scrollspy-nav="{smoothscroll:true}"

Events