ScrollFire

Introduction

ScrollFire is a jQuery Plugin that executes callback functions depending on how far into the page you've scrolled. We'll show you how you can use this plugin with many demos and examples.

jQuery Plugin Initialization


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

jQuery Plugin Options

Option Name Description
Selector The selector for the element that is being tracked.
Offset If this is 0, the callback will be fired when the selector element is at the very bottom of the user's window.
Callback This string is the function call that you want to make when the user scrolls to the threshold. It will only be called once.

ScrollFire Demo

Scroll through slowly to get sense of what ScrollFire can do for you. This is the ScrollFire code that we have used on this page.

  
  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);

For more detailed informations please visit: http://materializecss.com/grid.html