Scrollspy

Trigger events and animations while scrolling your page.

Usage

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

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

Examples

This example uses the repeat: true option. Scroll up and down to see the triggered animations.

Markup

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

Groups

You can also group scrollspy elements, so you won't have to apply the data attribute to each of them. Just add the data-uk-scrollspy"{target:'MY-CLASS'}" attribute to a container element, targetting the selector the items you want to animate within the container. When using a delay it will be applied cumulatively to the items within the row that scrolls into view. The delay will be resetted for the next row within the group when it scrolls into view.

Example

Example

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

This is an example of how to set options via attribute:

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

Events

You can bind callbacks to following events for custom functionality:

Example

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

Scrollspy Nav

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

For an example of the scrollspy nav, just check out our Scrollspy test page.

Markup

<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

This is an example of how to set options via attribute:

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

Events