在微信上关注我们
窗口滚动时为根据设置页面元素添加动画效果（仅在支持 CSS3 动画的浏览器上有效）。
下面的演示中包含了各种动画效果。
<div class="am-panel am-panel-default" data-am-scrollspy="{animation: 'fade'}">...</div>
<div class="am-panel am-panel-default" data-am-scrollspy="{animation: 'fade', delay: 300}">...</div>
添加 data-am-scrollspy 属性，并设置相关属性。
| 属性 | 描述 |
|---|---|
data-am-scrollspy="{animation:'fade'}" | 动画类名，参见 Amaze UI 动画库，默认为 fade |
data-am-scrollspy="{animation:'fade', delay: 300}" | 延迟动画执行时间（ms），默认为 0 |
data-am-scrollspy="{animation:'fade', repeat: false}" | 是否重复动画，默认为 true |
通过 $().scrollspy(options) 设置，参数同上。
<div class="am-panel am-panel-primary" id="my-scrollspy">
<div class="am-panel-hd">ScrollSpy via JS
</div>
<div class="am-panel-bd">
生命是一团欲望，欲望不满足便痛苦，满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
</div>
</div>
<script>
$(function() {
$('#my-scrollspy').scrollspy({
animation: 'slide-left',
delay: 500
})
});
</script>
| 事件名称 | 描述 |
|---|---|
inview:scrollspy:amui | 元素进入窗口可视区域时触发 |
outview:scrollspy:amui | 元素离开窗口可视区域时触发 |
$(function() {
$('#my-scrollspy').on('inview:scrollspy:amui', function() {
console.log('进入视口');
}).on('outview:scrollspy:amui', function() {
console.log('离开视口');
});
});
