menu

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: customCallbackFunc },
    {selector: '.other-class', offset: 200, callback: function() {
      customCallbackFunc();
    } },
  ];
  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 Execute a callback function when the user scrolls to the threshold. It will only be called once.
The callback provides a parameter which refers to the current element selected.

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