node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »

stupid-scrollspy

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.