Отслеживание скролла

Запускайте события и анимации при прокрутке страницы.

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

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

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

<div uk-scrollspy="cls:uk-animation-fade"></div>

  • Left

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Right

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • <div class="uk-child-width-1-2@m uk-grid-match" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-left; repeat: true">
            <h3 class="uk-card-title">Left</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-right; repeat: true">
            <h3 class="uk-card-title">Right</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>

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

Группировка

Вы также можете сгруппировать элементы scrollspy, поэтому вам не придется применять атрибут к каждому из них. Добавьте атрибут uk-scrollspy="target:MY-CLASS" и нацеливайте его на селектор элементов, которые вы хотите анимировать внутри контейнера. При использовании задержки она будет применена кумулятивно к элементам в строке, которая прокручивается в поле зрения. Задержка будет сброшена для следующей строки в группе, когда она прокручивается в области просмотра.

<div uk-scrollspy="target: > div; cls:uk-animation-fade; delay: 500">
    <div></div>
    <div></div>
</div>

  • <div class="uk-child-width-1-3@m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; delay: 500; repeat: true">
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>

Опции компонента

Любой из этих параметров может быть применен к атрибуту компонента. Разделяйте несколько вариантов точкой с запятой. Подробнее о работе с опцииями.

Опция Значение По умолчанию Описание
cls String uk-scrollspy-inview Класс для добавления, когда элемент находится в поле зрения. Классы разделяйте запятыми, тогда они будут переключены.
hidden Boolean true Скрывает элемент, находящийся вне окна просмотра.
offset-top Number 0 Верхнее смещение до активации.
offset-left Number 0 Смещение влево до запуска анимации.
repeat Boolean false Применяет cls каждый раз, когда элемент находится в области просмотра.
delay Number 0 Задержка в миллисекундах.

cls является основной опцией, и ее ключ может быть опущен, если это единственный параметр в значении атрибута.

<span uk-scrollspy="my-class"></span>

JavaScript

Подробнее о Компонентах JavaScript.

Инициализация

UIkit.scrollspy(element, options);

События

Следующие события будут инициированы для элементов, связанных с этим компонентом:

Имя Описание
inview Срабатывает после того, как элемент попадает в область просмотра.
outview Срабатывает после того, как элемент выходит из области просмотра.

Scrollspy nav

To automatically update the active menu item depending on the scroll position of your site, add the uk-scrollspy-nav attribute to any navigation. Each menu item must link to the ID of its corresponding part of the site.

<ul class="uk-nav uk-nav-default" uk-scrollspy-nav="closest: li; scroll: true">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

Для примера навигации по scrollspy, перейдите в раздел тесты. Любой из следующих параметров может быть применен к атрибуту uk-scrollspy-nav. Разделяйте параметры точкой с запятой.

Опции навигации с использованием Scrollspy

Любой из этих параметров может быть применен к атрибуту компонента. Разделяйте несколько вариантов точкой с запятой. Подробнее

Опция Значение По умолчанию Описание
cls String uk-active Класс активной ссылки.
closest String uk-scrollspy-init-inview Целевой элемент для применения класса.
scroll Boolean false Добавляет компонент Scroll к своим ссылкам.
overflow Boolean true Если для параметра overflow установлено значение true, первый или последний элемент останется активным, если он расположен над или под навигацией.
offset Number 0 Смещение в пикселях добавляется в верхнюю часть прокрутки.

Scrollspy nav JavaScript

Подробнее о компонентах JavaScript.

Инициализация

UIkit.scrollspyNav(element, options);

События

Следующие события будут инициированы для элементов, связанных с этим компонентом:

Имя Описание
active Срабатывает после того, как элемент становится активным.