ngScrollSpy

A scrollspy and affix implementation for AngularJS

View project onGitHub

What functionality does it provide?

  • ScrollSpy: a service that provides an saner api to work with the scroll event.
  • affix: a directive to affix an DOM element to a boundary of the browser window.
  • pagemenu and pageitems: two directives to build a menu from the contents in the page.

Installing

Install with bower:

bower install ngScrollSpy --save

Add a <script> to your index.html:

<script src="/bower_components/ngScrollSpy/dist/ngScrollSpy.js"></script>

And add ngScrollSpy as a dependency for your app:

angular.module('myApp', ['ngScrollSpy']);

Using the affix

To affix a DOM element to the top of the page simply add the affix attribute to it:

<div affix>Affixed!</div>

The class affix will be added to the element once it hits the top edge. Use the CSS to change the position to fixed when it is applied.

To affix a DOM element to some other edge, e.g. bottom, and to use another class you can use the following:

<div affix="bottom" affix-class="affixed">Affixed!</div>

Using the pagemenu

Put the tag in your document where you want the menu generated. Attach the pageitems attribute along with the selector attribute to a element to generate the menu form the html contained in the element.

Author

Magnús Örn Gylfason