Angular Sticky is an AngularJS directive that gives you the ability to keep any element on your page visible.
To use Angular Sticky, add the script to the head of your document.
<head>
<script src="angular-sticky.js"></script>
</head>Next, add the sticky directive to your angular app.
<script>
angular.module('demo', ['sticky'])
</script>Finally, add a sticky attribute to an element.
<div ng-app="demo">
<p sticky sticky-top="48" sticky-top="48" sticky-media="(min-width:640px)">This sticks to the top of the page.</p>
</div>- sticky: Enables an element to become sticky.
- sticky-top: Pixels between the top of the page and the sticky element.
- sticky-bottom: Pixels between the bottom of the page and the sticky element.
- sticky-media: Media query required to enable sticky.
See a sticky demonstration leveraging all of the available options.
The documented script is 3.11KB, and the compressed script is 572 bytes.