Listen for scroll events on a window, document, or element and execute callbacks when child elements scroll in or out of view (see example/example.html)

Install with component(1):

$ component install ilsken/scrollspy

// Make the navigation bar stick to the top of the page when the user scrolls past it
var nav = document.getElementById("nav")
var spy = require('scrollspy')(window)
spy
  .enter(setClass('fixed'))
  .leave(setClass(''))
  .start()
  .add(nav) // default listens for topOffset: 0 (reaches top of the target element or window)
function setClass(value) {
  return function () {
    this.setAttribute('class', value);
  }
}

@param {HTMLElement} element
@return {ScrollSpy}

Start listening for scroll events

@return {ScrollySpy} self for chaining

Stop listening for scroll events

@return {ScrollSpy} self for chaining

Add ScrollHandler for an element.

@param {HTMLElement} element Element you want to react to scroll events
@param {Number} topOffset Offset from top to trigger the enter event (default is 0)
@param {Number} leftOffset Offset from the left that you wish to trigger the enter event (default is undefined (ignore left offset))
@return {ScrollHandler} Handler object

Remove a scroll handler.

You can either pass the ScrollHandler returned by ScrollSpy#add or an HTMLElement If you pass an HTML element all listeners for that element will be removed If you pass a top or left offset, only listeners matching that element and offset will be removed

@param {ScrollHandler|HTMLElement} element Scroll handler to remove or an HTMLElement
@param {Remove} by topOffset} topOffset Remove by top offset
@param {Number} leftOffset Remove by left offset
@return {ScrollSpy} self for chaining

Set a default enter handler

Called when an element has scrolled into the location specified by either of it's offsets Must be in the form of function handler(is_at_top_offset, is_at_left_offset).

@param {Function} handler
@return {ScrollSpy} self for chaining

Set a default leave handler

Called when an element has left the location specified by either of it's offsets Must be in the form of function handler(is_at_top_offset, is_at_left_offset).

@param {Function} handler
@return {ScrollSpy} self for chaining

ScrollHandler

@param {ScrollSpy} spy
@param {HTMLElement} element
@param {Number} topOffset
@param {Number} leftOffset

Gets or sets the offset for this handler

@param {Number} topOffset
@param {Number} leftOffset
@return {ScrollHandler} self for chaining

Gets the parent ScrollSpy instance

@return {ScrollSpy} parent ScrollSpy instance

Set the enter handler

Called when an element has scrolled into the location specified by either of it's offsets Must be in the form of function handler(is_at_top_offset, is_at_left_offset).

@param {Function} handler
@return {ScrollSpy} self for chaining

Set the leave handler

Called when an element has left the location specified by either of it's offsets Must be in the form of function handler(is_at_top_offset, is_at_left_offset).

@param {Function} handler
@return {ScrollSpy} self for chaining

MIT