maheshbabu/angular-sticky-navigation-directive

Angular directive to make a sticky element, quick demo here: http://ng-milk.github.io/angular-sticky-navigation-directive/

Angular sticky navigation directive

Quick Demo

Angular directive to make a sticky element, read about it on here. It will add a ng-sticky-fixed class whenever your navigation is not visible on the viewport (therefore it will make it visible & sticky). It's up to you to style the class properly, see the example for more.

Usage

1. Include ng-sticky.js.
2. Add dm.stickyNav as a dependency to your app.
3. Profit!

Bower

Installable via bower:

bower install ng-sticky

Example

See index.html for an example.

<script>
  angular.module('app', ['dm.stickyNav']);
</script>

<style>
  .ng-sticky-fixed{
    background-color:rgba(0, 0, 0, 0.1);
    bottom:0;
    left:0;
    padding:10px 15px;
    position:fixed;
    top:auto;
    width:100%;
  }
</style>

<article ng-app="app">
  <section sticky-nav>
    <button class="btn btn-primary">Review</button>
    <button class="btn btn-danger">Delete</button>
  </section>

  <section>
    [...] Lots of text
  </section>
</article>

Custom sticky class

By default ng-sticky-fixed will be appended to the element's class. By providing a value to the sticky-nav attribute you can use any other class:

[...]
<style>
  .custom-class{
    /* ... */
  }
</style>

<article ng-app="app">
  <section sticky-nav="custom-class">
    [...]
  </section>
  [...]
</article>

Additional directive attributes

By default, the directive will attempt a 100 milliseconds $timeout call to wait for the DOM to load. You can provide different values for retrying until DOM is ready using max-tries and ms-retry-delay:

<div sticky-nav="custom-class" max-tries="5" ms-retry-delay="200"/>

When you don't want to use the height of your sticky element as part of the threshold for applying the sticky class, you can add the ignore-element-size directive attribute. It is useful for 'tall' elements like sidebars or side menus.

<div sticky-nav="custom-class" ignore-element-size/>

About ngmilk

ngmilk is the place to go for fresh front-end articles, with a focus on AngularJS. See more on ngmilk.rocks

Follow @ngmilkrocks on Twitter to stay ahead of the game.