滚动监听/Scrollspy

在滚动页面时，触发一些事件及动画。

用法

滚动监听组件监听页面滚动，并触发基于滚动位置的事件。例如，当你向下滚动页面时，你可以使首次出现在视窗中的一个元素触发一个平滑淡入的动画。只需添加带有以下选项的 data-uk-scrollspy 属性。

通常，动画组件中的类与滚动监视一起搭配使用。

示例

下面的例字使用了repeat: true 选项。向上或向下滚动可以看到被触发的动画效果。

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>

组

你还可以将多个需要添加滚动监听效果的元素编成一组，这样就不必分别为每个元素添加 data 属性了。只需要添加 data-uk-scollspy"{target:'MY-CLASS'}" 属性到容器元素，将 target 选项指向容器中你想要添加动画效果的条目。当使用 delay(延时)时，将会为进入视野的一行条目添加逐次显现的效果。这个延时效果会为同一组内的下一行元素滚动进入视野时重置。

Example

Example

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

    <!-- 无延时 -->
    <div class="my-class">...</div>

    <!-- 300ms 延时 -->
    <div class="my-class">...</div>

    <!-- 600ms 延时 -->
    <div class="my-class">...</div>

</div>

JavaScript选项

这是一个如何通过属性设置选项的示例：

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

事件

你可以为以下事件绑定回调函数，以实现自定义功能：

示例

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

滚动监听导航/Scrollspy Nav

根据你网站滚动条的位置来自动更新所对应的导航状态，只需添加Data属性 data-uk-scrollspy-nav 到任意导航栏中。每个菜单项必须链接至网站中网站中对应的具有相同ID的部分。

对于滚动监听的例子，可以查看滚动监听测试页面。

Code

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

这是一个如何通过属性设置选项的示例：

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

事件