Effecient Scrollspy Library – AnchorTrigger

Category: Javascript | July 14, 2016
Views Total:349 views
Official Page:Go to website
Last Update:July 14, 2016


Effecient Scrollspy Library – AnchorTrigger


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