Effecient Scrollspy Library – AnchorTrigger

Category: Javascript | July 14, 2016
Author: babakness
Views Total: 321 views
Official Page: Go to website
Last Update: July 14, 2016
License: MIT

Preview:

Effecient Scrollspy Library – AnchorTrigger

Description:

Just another scrollspy JavaScript library which listens for the scroll events and automatically executes a callback function when the page is scrolled past specified anchors.

Perfect for creating a side navigation that automatically updates the active/inactive states depending on the scroll position. Supports both horizontal and vertical page scrolling.

How to use it:

To get started, just include the anchor-trigger.js at the bottom of the webpage and we’re ready to go.

<script src="anchor-trigger.js"></script>

Basic usage:

  • listOfAnchorNames: array containing the names of anchors to watch
  • callback: function to callback when within a certain anchor
var obj = AnchorTriggre( listOfAnchorNames, callback, [options] )

Available options.

// tags to query as anchors. 
query: 'a',  

// Only call callback when anchor has changed.
onlyOnChange: true /

// fraction of page (top to bottom or left to right)  to trigger new area.
fraction: .5,   

// Delay to throttle calls during scroll
delay: 50,

// The element we are watching for scroll. 
bind: window,    

// Direction of scroll
// 'top' or 'left'
flow: 'top', 

// called even when trigger remains the same.
alwaysCallback: undefined

You Might Be Interested In:


Leave a Reply