Scrollspy is something that I needed to include in a project that does not use bootstrap. I still needed the scrollspy functionality that is bundled with bootstrap and after playing around with some alternatives, I found that the best solution was to create my own. The idea was to create a simple solution that did pretty much everything that bootstraps solution offers. So this is why I created this plugin.
For those that are not familiar with bootstraps scrollspy, basically this allows you to attach the plugin to a ul styled menu on a single page application. When you scroll down the page, the pages that you pass through would then mark the li children of your menu with an active class.
jQuery
I have created a demo which you can find here: http://codepen.io/r3plica/pen/NqbarV
unzip the contents to your desired location and include either library on your page.
It's really easy to use, simply initialise the script like this:
$("#nav").scrollspy();
To pass options to the plugin, simply pass an object to the call like so:
$("#nav").scrollspy({ offset: -25 });
Currently there are only a few options:
This allows you to define your own active class that gets added to the li element of the menu. default: 'active'
This tells the plugin whether it should animate the scroll when a link in your menu is click or not. default: false
This is the duration of the animation in milliseconds. default: 1000
This tells the plugin if there is any need to include an offset. default: 0
This function is called whenever the document scrolls into a new page.
In some cercumstances there will be a page that is not included in the menu. When scrollspy gets to this area the onExit function is called.
