滚动触发



介绍

ScrollFire是指当你页面滚动到某个位置时执行相应的函数。下面的例子展示了如何使用它。

初始化


  var options = [
    {selector: '.class', offset: 200, callback: 'globalFunction()' },
    {selector: '.other-class', offset: 200, callback: 'globalFunction()' },
  ];
  Materialize.scrollFire(options);
        

选项

名称 描述
Selector(指定的元素) 指定使用哪个元素
Offset(偏移量) 如果设置为0,那么当快要接近底部时才会被触发。
Callback(回调函数) 指定被触发的函数,并且只会被触发一次。

演示

以下是在本页面所用的代码。

  
  var options = [
    {selector: '#staggered-test', offset: 50, callback: 'Materialize.toast("This is our ScrollFire Demo!", 1500 )' },
    {selector: '#staggered-test', offset: 205, callback: 'Materialize.toast("Please continue scrolling!", 1500 )' },
    {selector: '#staggered-test', offset: 400, callback: 'Materialize.showStaggeredList("#staggered-test")' },
    {selector: '#image-test', offset: 500, callback: 'Materialize.fadeInImage("#image-test")' }
  ];
  Materialize.scrollFire(options);