Added sticky nav

Author: danmindru

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+/node_modules

bower.json

@@ -6,7 +6,7 @@
     "Dan Mindru <mindrudan@gmail.com>"
   ],
   "description": "Angular directive to make a sticky element, read more on https://ngmilk.rocks/2015/04/09/angularjs-sticky-navigation-directive/",
-  "main": "ng-sticky.js",
+  "main": "dist/ng-sticky.js",
   "keywords": [
     "angular",
     "angularjs",

dist/index.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var del = require('del'),
+    gulp = require('gulp'),
+    gulpsync = require('gulp-sync')(gulp),
+    uglify = require('gulp-uglify'),
+    eslint = require('gulp-eslint');
+
+var options = {
+  src: 'src',
+  dist: 'dist'
+};
+
+gulp.task('scripts', function () {
+  return gulp.src([options.src + '/**/*.js'])
+    .pipe(eslint())
+    .pipe(uglify())
+    .pipe(gulp.dest(options.dist));
+});
+
+gulp.task('clean', function (cb){
+  return del([options.dist], cb);
+});
+
+gulp.task('watch', function () {
+  return gulp.watch([options.src + '/**/*'], ['build']);
+});
+
+gulp.task('default', gulpsync.sync([['build'], ['watch']]));
+gulp.task('build', gulpsync.sync([['clean'], ['scripts']]));

gulpfile.js

@@ -0,0 +1,26 @@
+{
+  "name": "angular-sticky-navigation-directive",
+  "version": "0.0.1",
+  "description": "Angular directive to make a sticky element, read more on https://ngmilk.rocks/2015/04/09/angularjs-sticky-navigation-directive/",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ng-milk/angular-sticky-navigation-directive.git"
+  },
+  "keywords": [
+    "angular",
+    "angularjs",
+    "directive",
+    "sticky",
+    "navigation"
+  ],
+  "author": "Dan Mindru <mindrudan@gmail.com> (http://mindrudan.com/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ng-milk/angular-sticky-navigation-directive/issues"
+  },
+  "homepage": "https://github.com/ng-milk/angular-sticky-navigation-directive#readme"
+}

package.json

@@ -0,0 +1,61 @@
+/*
+ * angular-sticky-navigation-directive v0.0.1
+ * (c) 2015 Dan Mindru http://mindrudan.com
+ * License: MIT
+ */
+
+angular.module('dm.stickyNav', [])
+       .directive('sticky-nav', stickyNavDirective);
+
+stickyNavDirective.$inject = ['$window'];
+function stickyNavDirective($window){
+  function stickyNavLink(scope, element){
+    var w = angular.element($window),
+        size = element[0].clientHeight,
+        top = 0;
+
+    /*
+     * On scroll we just check the page offset
+     * if it's bigger than the target size we fix the controls
+     * otherwise we display them inline
+     */
+    function toggleStickyNav(){
+      if(!element.hasClass('controls-fixed') && $window.pageYOffset > top + size){
+        element.addClass('controls-fixed');
+      } else if(element.hasClass('controls-fixed') && $window.pageYOffset <= top + size){
+        element.removeClass('controls-fixed');
+      }
+    }
+
+    /*
+     * We update the top position -> this is for initial page load,
+     * while elements load
+     */
+    scope.$watch(function(){
+      return element[0].getBoundingClientRect().top + $window.pageYOffset;
+    }, function(newValue, oldValue){
+      if(newValue !== oldValue && !element.hasClass('controls-fixed')){
+        top = newValue;
+      }
+    });
+
+    /*
+     * Resizing the window displays the controls inline by default.
+     * This is needed to calculate the correct boundingClientRect.
+     * After the top is updated we toggle the nav, eventually
+     * fixing the controls again if needed.
+     */
+    w.bind('resize', function stickyNavResize(){
+      element.removeClass('controls-fixed');
+      top = element[0].getBoundingClientRect().top + $window.pageYOffset;
+      toggleStickyNav();
+    });
+    w.bind('scroll', toggleStickyNav);
+  }
+
+  return {
+    scope: {},
+    restrict: 'A',
+    link: stickyNavLink
+  };
+}