滚动侦测

在页面滚动时触发事件和动画。

用法

滚动侦测组件监听页面滚动并根据滚动位置触发事件。例如，如果向下滚动页面并且一个元素首次出现在视口中，则可以触发一个平滑动画以淡入该元素。只需添加 data-uk-scrollspy 属性和以下选项即可。

通常，动画组件的类会与滚动侦测一起使用。

示例

此示例使用 repeat: true 选项。向上和向下滚动以查看触发的动画。

标记

<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-uk-scrollspy"{target:'MY-CLASS'}" 属性添加到容器元素，即可定位要在容器内动画的项目的选择器。使用延迟时，它将累积应用于滚动到视图中的行中的项目。当组中的下一行滚动到视图中时，延迟将重置。

示例

示例

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

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

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

事件

您可以将回调绑定到以下事件以实现自定义功能

示例

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

滚动侦测导航

要根据站点滚动位置自动更新菜单中的活动菜单项，只需将数据属性 data-uk-scrollspy-nav 添加到任何导航。每个菜单项必须链接到站点相应部分的 ID。

有关滚动侦测导航的示例，请查看我们的滚动侦测测试页面。

标记

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

事件