menu

介绍

滚动显示是一个JQuery插件，根据滚动的距离来执行回调函数。我们将展示很多的示例来告诉你怎么使用。

jQuery插件初始化


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

jQuery 插件选项

选项名称 描述
Selector 追踪元素的选择器。
Offset 如果这是0，当选择器的元素到达用户的窗口时这个回调被触发。
Callback 执行一个回调函数当用户滚动到指定位置时。仅执行一次。
这个回调函数提供一个参数，这个参数关联到当前选择的元素。

滚动显示示例

慢慢的滚动，你会知道滚动显示能为你做什么。这个滚动显示的代码我们在这里使用的代码。

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