0.0.8 • Public • Published

Angular sticky navigation directive

Angular sticky navigation directive demo

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.


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


Installable via bower:

bower install ng-sticky


See index.html for an example.

  angular.module('app', ['dm.stickyNav']);
    background-color:rgba(0, 0, 0, 0.1);
    padding:10px 15px;
<article ng-app="app">
  <section sticky-nav>
    <button class="btn btn-primary">Review</button>
    <button class="btn btn-danger">Delete</button>
    [...] Lots of text

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:

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

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

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


npm i angular-sticky-navigation-directive

DownloadsWeekly Downloads






Last publish


  • mindrudan
  • shakann