Added angular-follow directive

README.md

@@ -2,3 +2,33 @@ angular-follow
 ==============
 
 AngularJS Directive that allows an element to become fixed when the page is scrolled.
+
+Usage
+-----
+
+To make an element follow the scroll, add the attribute *angular-follow* to the element:
+
+	<h3 angular-follow>This is the header</h3>
+
+You can customise the point at which the element follows the scroll by adding the *follow-point* attribute with the number of pixels you wish to buffer the follow by: 
+
+	<h3 angular-follow follow-point='100'>This is the header</h3>
+
+Now the element will become fixed when the top of the viewport is within 100px of the element.
+
+Install
+-------
+
+Just include the JavaScript file after the angular library inclusion.
+
+Behavior
+--------
+
+The directive will bind a scroll listener to the window that checks to see if the window has scrolled passed the element's *follow point*.  If it has then:
+
+	1. The element's CSS 'position' is set to 'fixed' and the CSS 'top' is set to the value of the *follow point* directive attribute.
+	2. A clone of the element is created as a sibling whose visibility is hidden
+	3. The width of the (now) fixed element is set to the width as calculated by it's non-fixed getBoundingClientRect() width.
+
+If the window has scrolled back above the element's follow point then the above is reversed; including restoring the old CSS 'position' and 'top' attributes and destroying the clone.
+

angular-follow.js

+angular.module('angular-follow', [])
+    .directive('follow', ['$window', function ($window) {
+        return {
+            scope: {
+                followPoint: '=followPoint'
+            },
+            link: function(scope, element, attrs) {
+
+                scope.scrolling = false;
+
+                //fix point- the place in the scroll position when the item becomes fixed
+
+                //first, must check if element is at the fix point
+                angular.element($window).bind('scroll', function () {
+
+                    element.each(function (index, elem) {
+
+                        var followPoint = 0;
+
+                        if (attrs['followPoint'] && attrs['followPoint'] != '') {
+                            followPoint = parseInt(attrs['followPoint']);
+                        }
+
+                        if (!scope.scrolling) {
+
+                            rect = elem.getBoundingClientRect();
+
+                            if (rect.top < followPoint) {
+                                if (!scope.scrolling) {
+
+                                    scope.oldPosition = element.css("position");
+                                    scope.oldTop = element.css("top");
+
+                                    scope.clone = element.clone();
+                                    scope.clone.css("visibility", "hidden");
+                                    element.after(scope.clone);
+
+                                    element.css("position", "fixed");
+                                    element.css("top", followPoint);
+                                    element.css("width",rect.width);
+
+                                    scope.scrolling = true;
+                                }
+                            }
+                        } else {
+
+                            rect = scope.clone[0].getBoundingClientRect();
+
+                            if (rect.top >= followPoint) {
+
+                                element.css("position", scope.oldPosition);
+                                element.css("top", scope.oldTop);
+                                element.css("width","");
+                                scope.clone.remove();
+
+                                scope.scrolling = false;
+                            }
+
+                        }
+                    });
+
+                });
+
+            }
+        }
+    }]);

bower.json

+{
+	"name": "angular-follow",
+	"version": "1.0",
+	"main": "./angular-follow.js",
+	"dependencies": {
+		"angular": "~1.2.1"
+	},
+	"readme": "angular-follow\n====================\n\nbower repo for angular-follow.js",
+	"readmeFilename": "README.md",
+	"_id": "angular-follow@1.0",
+	"description": "bower-angular-follow ==================",
+	"repository": {
+		"type": "git",
+		"url": "git://github.com/brendan-skyrkt/angular-follow.git"
+	}
+}