A simple, pure javascript (No jQuery required!) AngularJS directive to make elements stick when scrolling down.
npm install ngstickyAngular Sticky
==============
A simple, pure javascript (No jQuery required!) AngularJS directive to make elements stick when scrolling down.
* Allows use of an offset so elements can be stuck to eg. 50px from the top of the browser
* Recalculates element position on page load and on window resize
* Clean: No external CSS or jQuery required, and it only adds the classes you specify.
Install with bower:
``bash`
bower install ngSticky
Include the .js file in your page then enable usage of the directive by including the "sticky" module
as a dependency. Use the directive as follows:
To toggle the element stickiness you can bind with scope using the disable-sticky (ng-model) as follows {{ disabled = true }}:
To make the element stick within a certain offset of the top of the screen, you can provide an offset as follows:
If you want to customize the style while the element is sticky, we have an api for you too:
And if you want to customize the body style while the element is sticky:
In order to enable sticky based on a media query:
If you want the sticky element to be scrollable only if it's smaller then the window inner height then you can set the stick-limit attribute:
And if you want to confine an element to its parent, and let it 'bottom out', just add the confine attribute:
> NOTE: The confine attribute will automagically assign its parent a position: relative` style in order to help with absolute positioning relative to the parent.
Cheers.