ScrollToggle

ScrollToggle is a small JavaScript component that lets you perform actions on elements depending on which direction the viewport is scrolled.

DEMO

Also check out the angular-scroll-toggle AngularJS directive.

How to use

Include the JS and CSS files.

Instantiate a new ScrollToggle element.

var foo = document.getElementById('element-id').scrollToggle();

Or, if you use jQuery.

var foo = $('#element-id').scrollToggle();

Initialize listner.

foo.init();

Or, also pass custom options like so:

foo.init({offset: 500});

And halt ScrollToggle instance:

foo.halt();

You can also provide a callback function to scrollToggle to override the default toggle function like so

var foo = $('#element-id').scrollToggle(function(direction, element){
	if(direction) element.html('Scrolling Down');
	else element.html('Scrolling Up');
});

foo.init();

Options

• scrollClass applies passed class name to element on init

• scrollUpClass applies passed class name to element on upwards scroll

• scrollDownClass applies passed class name to element on downward scroll

• offset ignores scrolling between top margin and offset

TODO

• accept callback function
• Package default CSS rules for plug-and-play
• Provide uglified JS
• Provide minified CSS
• Add timeout option