Stupid Scrollspy

Another stupid scrollspy

Usage

Scrollspy is dependen on stupid-tick. Add the tick to the scrollspy object. Scrollspy is a singleton object, so to get the object use getInstance().

var Tick = require('stupid-tick');
var tick = Tick();

var Scrollspy = require('stupid-scrollspy');
var scrollspy = Scrollspy({tick: tick});

// Query elements
var HTMLElements = document.querySelectorAll('.htmlelement');

// Loop over elements
for (var i = 0; i < HTMLElements.length; i++) {
	// Create scrollspy elements
	createScrollspyElements(HTMLElements[i]);
};

function createScrollspyElements(_htmlElement){
	// Add html element to scrollspy
	var scrollspyElement = scrollspy.add(_htmlElement);
	
	// Listen on the scrollspy element
	scrollspyElement.on('active', function(e){
		console.log('active', e.el, e.direction);
	});
}

ScrollSpy Methods

var Scrollspy = require('stupid-scrollspy');
var scrollspy = Scrollspy({tick: tick});

// remove all element from the scrollspy
scrollspy.flush();

// destroy scrollspy
scrollspy.destroy();

Options Global vs Local

Global:

var Tick = require('stupid-tick');
var tick = Tick();

var Scrollspy = require('stupid-scrollspy');
var scrollspy = Scrollspy({
	tick: tick, 
	useCSS: true,
	compensateTop: true,
	compensateBottom: true
});

// Use CSS local override.
// scrollspy.add(HTMLElement, options);
var scrollspyElement = scrollspy.add(_htmlElement);

Local:

var Tick = require('stupid-tick');
var tick = Tick();

var Scrollspy = require('stupid-scrollspy');
var scrollspy = Scrollspy({tick: tick});

// Use CSS local override.
// scrollspy.add(HTMLElement, options);
var scrollspyElement = scrollspy.add(_htmlElement,{
	useCSS: true,
	compensateTop: true,
	compensateBottom: true
});

Compensate

The compensate options make the first and last child have the progress from 0 to 100 even though its progress is otherwise. It maps it so you can control a animation from 0 to 100.

var Tick = require('stupid-tick');
var tick = Tick();

var Scrollspy = require('stupid-scrollspy');
var scrollspy = Scrollspy({
	tick: tick, 
	compensateTop: true,
	compensateBottom: true
});

Methods

// Add to scrollspy
var scrollspyElement = scrollspy.add(_htmlElement);

// Remove from scrollspy
scrollspy.remove(scrollspyElement);

Map Method

The progress event starts when the element is visible and ends when it is not visible. That is show by the progress value that goes from 0 to 1. But if you want that value to start and/or end sooner, you can use the map method.

When the progress value is a 0.2 the map method maps it to 0. And when the progress value is at 0.8 it maps it to 1. You still get a value range from 0 to 1.

// Map progress value
scrollspyElement.on('progress', function(e){
	var mapped = scrollspy.map(e.progress, 0.2, 0.8);
});

Scrollspy Element Events

// Progress
scrollspyElement.on('progress', function(e){
	console.log('progress', e.el, e.direction, e.progress);
});

// Active
scrollspyElement.on('active', function(e){
	console.log('active', e.el, e.direction);
});
scrollspyElement.on('deactive', function(e){
	console.log('deactive', e.el, e.direction);
});

// Visibility
scrollspyElement.on('visible', function(e){
	console.log('visible', e.el, e.direction);
});
scrollspyElement.on('hidden', function(e){
	console.log('hidden', e.el, e.direction);
});

// Top of screen
scrollspyElement.on('atTop', function(e){
	console.log('atTop', e.el, e.direction);
});
scrollspyElement.on('notAtTop', function(e){
	console.log('notAtTop', e.el, e.direction);
});

// Bottom of screen
scrollspyElement.on('atBottom', function(e){
	console.log('atBottom', e.el, e.direction);
});
scrollspyElement.on('notAtBottom', function(e){
	console.log('notAtBottom', e.el, e.direction);
});

Tests

See test/live/public.