marcelometal / ScrollSpy

Scrollspy can be used to bind a callback that will be called when user scrolls to the given element.

Scrollspy

Scrollspy can be used to bind a callback function to be called when the element reaches its scroll position.

Setup

Install via npm

npm install @globocom/scrollspy

Or include one of the browser bundles via a script tag:

<script src="https://unpkg.com/@globocom/scrollspy@0.1.0/dist/scrollspy.min.js"></script>

Options

ScrollSpy.add({
  el: DOMElement, // required
  callback: Function, // required - A function to be called when the element gets scrolled into the screen
  offset: 200, // An offset (in px) to be considered upon scroll calculation
  reference: "top" // ["top"|"bottom"] Which side to use as base for position calculation
});

Usage

import * as ScrollSpy from "@globocom/scrollspy";

ScrollSpy.add({
  el: document.querySelector(".myDiv"),
  callback: function() {
    // do something
  }
});

ScrollSpy.add({
  el: document.querySelector(".myDiv2"),
  offset: 0,
  callback: function() {
    // do something
  }
});

ScrollSpy.add({
  el: document.querySelector(".myDiv3"),
  offset: 40,
  reference: "bottom",
  callback: function() {
    // do something
  }
});

Debug

There is also available a debug function that highlights "scrollspied" elements:

ScrollSpy.debug();

Contributing

This project utilizes npm run scripts. See package.json for available scripts.

License

Scrollspy is licensed under the MIT license.