launch ScrollFire

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.

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() {
		Materialize.toast("This is our ScrollFire Demo!", 1500);
	}},
	{selector: '#staggered-test', offset: 205, callback: function() {
		Materialize.toast("Please continue scrolling!", 1500);
	}},
	{selector: '#staggered-test', offset: 500, callback: function() {
		Materialize.showStaggeredList("#staggered-test");
	}}
];

Materialize.scrollFire(options);
  • List Item

    This is a description

  • List Item

    This is a description

  • List Item

    This is a description

  • List Item

    This is a description

  • List Item

    This is a description