ScrollSpy is a small but powerful MooTools plugin that allows you to listen to scrolling within any DOM element and execute functions based upon the element's scroll position.

MooTools Javascript Class

/*
---
description:     ScrollSpy

authors:
  - David Walsh (http://davidwalsh.name)

license:
  - MIT-style license

requires:
  core/1.2.1:   '*'

provides:
  - ScrollSpy
...
*/
var ScrollSpy = new Class({

	/* implements */
	Implements: [Options,Events],

	/* options */
	options: {
		container: window,
		max: 0,
		min: 0,
		mode: 'vertical'/*,
		onEnter: $empty,
		onLeave: $empty,
		onScroll: $empty,
		onTick: $empty
		*/
	},

	/* initialization */
	initialize: function(options) {
		/* set options */
		this.setOptions(options);
		this.container = document.id(this.options.container);
		this.enters = this.leaves = 0;
		this.max = this.options.max;
		this.inside = false;
		
		/* make it happen */
		this.addListener();
	},

	/* a method that does whatever you want */
	addListener: function() {
		/* state trackers */
		this.container.addEvent('scroll',function(e) {
			/* if it has reached the level */
			var position = this.container.getScroll(),
				xy = position[this.options.mode == 'vertical' ? 'y' : 'x'];
			/* if we reach the minimum and are still below the max... */
			if(xy >= this.options.min && (this.max == 0 || xy <= this.max)) {
					/* trigger Enter event if necessary */
					if(!this.inside) {
						/* record as inside */
						this.inside = true;
						this.enters++;
						/* fire enter event */
						this.fireEvent('enter',[position,this.enters,e]);
					}
					/* trigger the "tick", always */
					this.fireEvent('tick',[position,this.inside,this.enters,this.leaves,e]);
			}
			/* trigger leave */
			else if(this.inside){
				this.inside = false;
				this.leaves++;
				this.fireEvent('leave',[position,this.leaves,e]);
			}
			/* fire scroll event */
			this.fireEvent('scroll',[position,this.inside,this.enters,this.leaves,e]);
		}.bind(this));
	}
});

Class: ScrollSpy

Implements:

Options, Events

ScrollSpy Method: constructor

Notes:

• ScrollSpy debuted Wednesday, May 27, 2009 on the David Walsh Blog: http://davidwalsh.name/scrollspy
• ScrollSpy requires MooTools Core only -- no MooTools More dependencies.
• Visit http://davidwalsh.name/scrollspy for example usages.

Syntax:

var myScrollSpy = new ScrollSpy(options);

Arguments:

1. options - (object, optional) Initial options for the class.

Options:

• min - (integer, defaults to 0) The minimum value of the X or Y coordinate, depending on mode.
• mode - (string, defaults to 'vertical') Defines whether to listen to X or Y scrolling.
• max - (integer, defaults to 0) The maximum value of the X or Y coordinate, depending on mode.
• container - (element, defaults to window) The element whose scrolling to listen to.

Returns:

• (object) A new ScrollSpy instance.

Events:

enter

• (function) Function to execute when the element's designated area is scrolled into.

Signature

onEnter(position, enters, event)

Arguments:

1. position - (object) The container's scroll position object.
2. enters - (integer) The number of times the scroll area has been entered.
3. event - (event) The Event object from the main scroll event.

leave

• (function) Function to execute when the element's designated area is scrolled out of.

Signature

onLeave(position, leaves, event)

Arguments:

1. position - (object) The container's scroll position object.
2. leaves - (integer) The number of times the scroll area has been left.
3. event - (event) The Event object from the main scroll event.

scroll

• (function) Function to execute on each scroll event.

Signature

onTick(position, inside, enters, leaves, event)

Arguments:

1. position - (object) The container's scroll position object.
2. inside - (boolean) Represents whether or not the scroll is within the designated min and max area.
3. enters - (integer) The number of enters.
4. leaves - (integer) The number of leaves.
5. event - (event) The Event object from the main scroll event.

tick

• (function) Function to execute on each scroll event when the scroll position is between the enter and exit.

Signature

onTick(position, inside, enters, leaves, event)

Arguments:

1. position - (object) The container's scroll position object.
2. inside - (boolean) Represents whether or not the scroll is within the designated min and max area.
3. enters - (integer) The number of enters.
4. leaves - (integer) The number of leaves.
5. event - (event) The Event object from the main scroll event.