UIkit的Scrollspy组件通过uk-scrollspy属性监听元素进入视口并触发动画，支持cls、target、delay、repeat等参数设置，结合uk-animation-fade、uk-animation-slide-bottom等动画类实现滚动动效，需确保页面可滚动且使用现代浏览器，重复触发需开启repeat。
UIkit 的 Scrollspy 组件可以监听元素进入视口的状态，结合内置的动画类（如 uk-animation-fade、uk-animation-slide-bottom 等），实现滚动时触发动画的效果。使用简单，适合打造动态滚动页面。
启用 Scrollspy 基本用法
通过 uk-scrollspy 属性为元素添加滚动监听。当元素进入浏览器可视区域时，会自动触发指定动画。
滚动到我时淡入显示
其中 cls 参数定义要添加的动画类，默认值就是 uk-animation-fade，可省略。
设置动画触发方式与延迟
可以通过参数控制动画行为：
立即学习“前端免费学习笔记（深入）”；
- target：指定多个子元素分别触发动画
- delay：设置每个元素动画之间的延迟时间（毫秒）
- repeat：是否在每次进入视口都触发动画（默认只触发一次）
- offset-top：提前多少像素触发动画
第一项
第二项
第三项
以上代码会让容器内的每个 div 依次延迟 100ms 播放默认淡入动画。
常用动画效果类
UIkit 提供多种动画类，配合 Scrollspy 使用：
-
uk-animation-fade：淡入 -
uk-animation-scale-up：从小变大出现 -
uk-animation-slide-top：从上滑入 -
uk-animation-slide-bottom：从下滑入 -
uk-animation-slide-left：从左滑入 -
uk-animation-slide-right：从右滑入 -
uk-animation-kenburns：缩放切换（适合图片）
例如：
内容从下方滑入
注意事项
确保页面有足够的滚动空间才能触发 Scrollspy。如果内容太短未出现滚动条，动画可能不会执行。另外，动画只在支持 CSS3 动画的现代浏览器中生效。
若需动画在用户滚动回该区域时再次触发，设置 repeat: true 即可。
