Scrollspy

Trigger events and animations while scrolling your page.

Scrollspy

Trigger events and animations while scrolling your page.

Usage

The Scrollspy component listens to page scrolling and trigger events based on the scroll position. For example, if you scroll down a page, and an element appears in the viewport for the first time, you can trigger a smooth animation to fade in the element. Just add the uk-scrollspy attribute which takes the following options.

Typically, classes from the Animation component are used together with the Scrollspy component.

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

This example uses the repeat: true option. Scroll up and down to see the triggered animations. The layout is made with the Card component.

Groups

You can also group scrollspy elements, so you won’t have to apply the attribute to each of them. Just add the uk-scrollspy="target: SELECTOR" attribute to a container element, targeting the selector of the items you want to animate inside the container. When using a delay, it will be applied cumulatively to the items that scroll into view.

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

Set cls option per target

You can also give each target a separate cls option. Just add the uk-scrollspy-class="CLASS" attribute to a target element. It will override the cls option set on the component.

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

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

OptionValueDefaultDescription
clsString``Class to toggle when the element enters/leaves viewport.
hiddenBooleantrueHides the element while out of view.
offset-topNumber0Top offset before triggering in view.
offset-leftNumber0Left offset before triggering in view.
repeatBooleanfalseApplies the cls class every time the element is in view.
delayNumber0Delay time in ms.

cls is the Primary option and its key may be omitted, if it’s the only option in the attribute value.

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

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.scrollspy(element, options);

Events

The following events will be triggered on elements with this component attached:

NameDescription
inviewFires after an item moves into the viewport.
outviewFires after an item moves into out of viewport.

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>

For an example of the scrollspy nav, just check out the fixed nav on the right side of this page or take a look at the test. Any of the following options can be applied to the uk-scrollspy-nav attribute. Separate multiple options with a semicolon.

Scrollspy nav options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

OptionValueDefaultDescription
clsStringuk-activeClass to add to the active links.
closestStringuk-scrollspy-init-inviewTarget to apply the class to.
scrollBooleanfalseAdds the Scroll component to its links.
overflowBooleantrueIf overflow is set to true, the first or last item will stay active if above or below the navigation.
offsetNumber0Pixel offset added to scroll top.

Scrollspy nav JavaScript

Learn more about JavaScript components.

Scrollspy nav initialization

UIkit.scrollspyNav(element, options);

Scrollspy nav events

The following events will be triggered on elements with this component attached:

NameDescription
activeFires after an item becomes active.