Компонент Scrollspy

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

Отслеживание прокрутки. Применение

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

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

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

    Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми правилами.

    Right

    Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад.

  • <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>Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми правилами.</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>Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад.</p>
            </div>
        </div>
    </div>

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


Группы

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

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

    Когда от милой моей долины поднимается солнце UIkit 3.

    Fade

    Когда от милой моей долины поднимается солнце UIkit 3.

    Fade

    Когда от милой моей долины поднимается солнце UIkit 3.

    Fade

    Когда от милой моей долины поднимается солнце UIkit 3.

    Fade

    Когда от милой моей долины поднимается солнце UIkit 3.

    Fade

    Когда от милой моей долины поднимается солнце UIkit 3.

  • <div class="uk-child-width-1-3@m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: .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>Когда от милой моей долины поднимается солнце UIkit 3.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">Fade</h3>
                <p>Когда от милой моей долины поднимается солнце UIkit 3.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">Fade</h3>
                <p>Когда от милой моей долины поднимается солнце UIkit 3.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">Fade</h3>
                <p>Когда от милой моей долины поднимается солнце UIkit 3.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">Fade</h3>
                <p>Когда от милой моей долины поднимается солнце UIkit 3.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">Fade</h3>
                <p>Когда от милой моей долины поднимается солнце UIkit 3.</p>
            </div>
        </div>
    </div>

Установить для цели опцию cls

Вы также можете дать каждой цели отдельную опцию cls. Просто добавьте к целевому элементу атрибут uk-scrollspy-class="CLASS". Он переопределит опцию cls, установленную для компонента.

<div uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 500">
    <div uk-scrollspy-class="uk-animation-slide-top"></div>
    <div uk-scrollspy-class="uk-animation-slide-bottom"></div>
</div>
  • Bottom

    Ему так просто было заказать для нее катер, но он это делать.

    Top

    Ему так просто было заказать для нее катер, но он это делать.

    Bottom

    Ему так просто было заказать для нее катер, но он это делать.

  • <div class="uk-child-width-1-3@m uk-grid-small" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom; target: .uk-card; delay: 300; repeat: true">
        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">Bottom</h3>
                <p>Ему так просто было заказать для нее катер, но он это делать.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-slide-top">
                <h3 class="uk-card-title">Top</h3>
                <p>Ему так просто было заказать для нее катер, но он это делать.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">Bottom</h3>
                <p>Ему так просто было заказать для нее катер, но он это делать.</p>
            </div>
        </div>
    </div>

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

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

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

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

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

JavaScript

Узнайте больше о компонентах JavaScript в фреймворке UIkit 3.

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

UIkit.scrollspy(element, options);

События

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

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

Scrollspy nav

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

<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 просто посмотрите на фиксированную навигацию в правой части этой страницы или посмотрите на тестовую страницу.


Опции Scrollspy nav

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

Опция Значение По умолчанию Описание
cls String uk-active Класс добавляемый к активным ссылкам.
closest String uk-scrollspy-init-inview Target to apply the class to.
scroll Boolean false Adds the Scroll component to its links.
overflow Boolean true Если для параметра overflow установлено значение true, первый или последний элемент останется активным, если находится над или под навигацией.
offset Number 0 Pixel offset added to scroll top.

JavaScript Scrollspy nav

Узнайте больше о компонентах JavaScript в фреймворке UIkit 3.

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

UIkit.scrollspyNav(element, options);

События Scrollspy nav

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

Название Описание
active Срабатывает после того, как элемент становится активным.
Документация
Компоненты