From c8596993092ddfd7bb3e8f3f65e13d5ca39b6e51 Mon Sep 17 00:00:00 2001
From: Pat Long <plong00@gmail.com>
Date: Wed, 25 Nov 2015 14:28:10 -0800
Subject: [PATCH 1/3] created controller for ui-scrollpoint and moved settings
 in here, allowing other directives to extend on ui-scrollpoint. 
 ui-scrollpoint-pin directive

---
 demo/index.html         |  27 +++---
 dist/scrollpoint.js     | 191 ++++++++++++++++++++++++++++++----------
 dist/scrollpoint.min.js |   4 +-
 src/scrollpoint.js      | 189 +++++++++++++++++++++++++++++----------
 4 files changed, 301 insertions(+), 110 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index b05dc71..d5bcb20 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -16,12 +16,10 @@
                     $rootScope.$broadcast('scrollpointShouldReset');
                 };
                 $scope.scrollAction = function(element, distance){
-                    // scroll events are triggered by DOM, so use $scope.$apply();
-                    $scope.$apply(function(){
-                        $scope.actionClass = (distance < 0) ? 'warning' : 'info';
-                        $scope.actionDistance = distance;
-                    });
+                    $scope.actionClass = (distance < 0) ? 'warning' : 'info';
+                    $scope.actionDistance = distance;
                 };
+                $scope.word = 'scrollin';
             });
         </script>
         <style>
@@ -32,6 +30,9 @@
             p.ui-scrollpoint {
                 background: lightgreen;
             }
+            .ui-scrollpoint.pinned {
+                z-index: 100;
+            }
 
             .my-scroll-class {
                 background: cyan;
@@ -55,11 +56,11 @@ <h3>What?</h3>
 
                     <div id="scrollExample" class="well" ui-scrollpoint="+100">
                         <p ui-scrollpoint>They see me scrollin...</p>
-                        <p ui-scrollpoint>They see me scrollin...</p>
+                        <p ui-scrollpoint ui-scrollpoint-pin>They see me scrollin and pinnin...</p>
                         <p ui-scrollpoint="10%">They see me scrollin (10%)...</p>
                         <p ui-scrollpoint="25%">They see me scrollin (25%)...</p>
                         <p ui-scrollpoint="100%">They see me scrollin (100%)...</p>
-                        <p ui-scrollpoint="-100">offest: -100</p>
+                        <p ui-scrollpoint="-100" ui-scrollpoint-pin>offest: -100</p>
                         <p ui-scrollpoint="+100">offest: +100</p>
                         Try scrolling past this line and see effect on above lines...
                     </div>
@@ -89,8 +90,8 @@ <h3>A scrollpoint with a target set on a parent scrollable div</h3>
                         </div>
                         <div id="scrollExample2" class="well" ui-scrollpoint="+100">
                             <p ui-scrollpoint="+10px">They see me scrollin (+10px)...</p>
-                            <p ui-scrollpoint>They see me scrollin...</p>
-                            <p ui-scrollpoint="10%">They see me scrollin (10%)...</p>
+                            <p ui-scrollpoint ui-scrollpoint-pin>They see me scrollin and pinnin...</p>
+                            <p ui-scrollpoint="10%" ui-scrollpoint-pin>They see me scrollin and pinnin (10%)...</p>
                             <p ui-scrollpoint="25%">They see me scrollin (25%)...</p>
                             <p ui-scrollpoint="100%">They see me scrollin (100%)...</p>
                             <p ui-scrollpoint="-100">offest: -100</p>
@@ -232,8 +233,8 @@ <h3 class="visible-md">&nbsp;</h3>
                     <h3>Bottom Scrollpoint</h3>
                     <div class="well">
                         <div id="scrollBottomExample" class="well" ui-scrollpoint ui-scrollpoint-bottom="true">
-                            <p ui-scrollpoint ui-scrollpoint-bottom="true">They see me scrollin...</p>
-                            <p ui-scrollpoint="+15" ui-scrollpoint-bottom="true">They see me scrollin (+15)...</p>
+                            <p ui-scrollpoint ui-scrollpoint-bottom="true" ui-scrollpoint-pin>They see me scrollin and pinnin...</p>
+                            <p ui-scrollpoint="+15" ui-scrollpoint-bottom="true" ui-scrollpoint-pin>They see me scrollin and pinnin (+15)...</p>
                             <p ui-scrollpoint="100%" ui-scrollpoint-bottom="true">They see me scrollin (100%)...</p>
                             <p ui-scrollpoint="25%" ui-scrollpoint-bottom="true">They see me scrollin (25%)...</p>
                             <p ui-scrollpoint="10%" ui-scrollpoint-bottom="true">They see me scrollin (10%)...</p>
@@ -259,8 +260,8 @@ <h3>Bottom Scrollpoint with parent target</h3>
                             This is a spacer
                         </div>
                         <div id="scrollBottomExample" class="well" ui-scrollpoint ui-scrollpoint-bottom="true">
-                            <p ui-scrollpoint ui-scrollpoint-bottom="true">They see me scrollin...</p>
-                            <p ui-scrollpoint="+15" ui-scrollpoint-bottom="true">They see me scrollin (+15)...</p>
+                            <p ui-scrollpoint ui-scrollpoint-bottom="true" ui-scrollpoint-pin>They see me scrollin and pinnin...</p>
+                            <p ui-scrollpoint="+15" ui-scrollpoint-bottom="true" ui-scrollpoint-pin>They see me scrollin and pinnin (+15)...</p>
                             <p ui-scrollpoint="50%" ui-scrollpoint-bottom="true">They see me scrollin (50%)...</p>
                             <p ui-scrollpoint="75%" ui-scrollpoint-bottom="true">They see me scrollin (75%)...</p>
                             <p ui-scrollpoint="100%" ui-scrollpoint-bottom="true">They see me scrollin (100%)...</p>
diff --git a/dist/scrollpoint.js b/dist/scrollpoint.js
index 3d276c4..b04d878 100644
--- a/dist/scrollpoint.js
+++ b/dist/scrollpoint.js
@@ -1,7 +1,7 @@
 /*!
  * angular-ui-scrollpoint
  * https://github.com/angular-ui/ui-scrollpoint
- * Version: 1.2.1 - 2015-11-17T02:53:22.290Z
+ * Version: 1.2.1 - 2015-11-25T22:24:07.196Z
  * License: MIT
  */
 
@@ -27,44 +27,62 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
             return (contentHeight ? ($window.document.body.scrollHeight - $window.innerHeight) : $window.innerHeight);
         }
         return {
-            require: '^?uiScrollpointTarget',
+            require: ['uiScrollpoint', '^?uiScrollpointTarget'],
             scope: {
                 uiScrollpoint: '@',
                 uiScrollpointClass: '@?',
                 uiScrollpointAction: '&?',
-                uiScrollpointBottom: '@'
+                uiScrollpointBottom: '@?'
             },
-            link: function (scope, elm, attrs, uiScrollpointTarget) {
-                var absolute = true,
-                    percent = false,
-                    shift = 0,
-                    past = false,
-                    bottom = scope.uiScrollpointBottom,
-                    fixLimit,
-                    $target = uiScrollpointTarget && uiScrollpointTarget.$element || angular.element($window),
-                    scrollpointClass = scope.uiScrollpointClass || 'ui-scrollpoint',
-                    action = scope.uiScrollpointAction ? scope.uiScrollpointAction() : undefined;
+            controller: function(){
+                this.absolute = true;
+                this.percent = false;
+                this.shift = 0;
+                this.past = undefined;
+
+                this.bottom = undefined;
+                this.hasTarget = false;
+                this.$target = undefined;
+                this.scrollpointClass = 'ui-scrollpoint';
+                this.action = undefined;
+
+                this.getScrollOffset = function(){
+                    return this.hasTarget ? this.$target[0].scrollTop : getWindowScrollTop();
+                };
+            },
+            link: function (scope, elm, attrs, Ctrl) {
+                var uiScrollpoint = Ctrl[0];
+                var uiScrollpointTarget = Ctrl[1];
+                
+                // configure controller with the attributes
+                uiScrollpoint.bottom = scope.uiScrollpointBottom;
+                uiScrollpoint.hasTarget = uiScrollpointTarget ? true : false;
+                uiScrollpoint.$target = uiScrollpointTarget && uiScrollpointTarget.$element || angular.element($window);
+                uiScrollpoint.scrollpointClass = scope.uiScrollpointClass || 'ui-scrollpoint';
+                uiScrollpoint.action = scope.uiScrollpointAction ? scope.uiScrollpointAction() : undefined;
+
+                var fixLimit;
 
                 function setup(scrollpoint) {
                     if (!scrollpoint) {
-                        absolute = false;
+                        uiScrollpoint.absolute = false;
                     } else if (typeof (scrollpoint) === 'string') {
                         // charAt is generally faster than indexOf: http://jsperf.com/indexof-vs-charat
-                        percent = (scrollpoint.charAt(scrollpoint.length-1) == '%');
-                        if(percent){
+                        uiScrollpoint.percent = (scrollpoint.charAt(scrollpoint.length-1) == '%');
+                        if(uiScrollpoint.percent){
                             scrollpoint = scrollpoint.substr(0, scrollpoint.length-1);
                         }
                         if (scrollpoint.charAt(0) === '-') {
-                            absolute = percent;
-                            shift = -parseFloat(scrollpoint.substr(1));
+                            uiScrollpoint.absolute = uiScrollpoint.percent;
+                            uiScrollpoint.shift = -parseFloat(scrollpoint.substr(1));
                         } else if (scrollpoint.charAt(0) === '+') {
-                            absolute = percent;
-                            shift = parseFloat(scrollpoint.substr(1));
+                            uiScrollpoint.absolute = uiScrollpoint.percent;
+                            uiScrollpoint.shift = parseFloat(scrollpoint.substr(1));
                         } else {
                             var parsed = parseFloat(scrollpoint);
                             if (!isNaN(parsed) && isFinite(parsed)) {
-                                absolute = true;
-                                shift = parsed;
+                                uiScrollpoint.absolute = true;
+                                uiScrollpoint.shift = parsed;
                             }
                         }
                     } else if (typeof (scrollpoint) === 'number') {
@@ -77,16 +95,16 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                 setup(scope.uiScrollpoint);
 
                 function calcLimit(){
-                    var limit = absolute ? shift : calcElementTop() + shift;
-                    if(percent && absolute){
+                    var limit = uiScrollpoint.absolute ? uiScrollpoint.shift : calcElementTop() + uiScrollpoint.shift;
+                    if(uiScrollpoint.percent && uiScrollpoint.absolute){
                         // percent only works in absolute mode (absolute mode is forced for %'s in setup())
-                        limit = shift / 100.0 * calcTargetContentHeight();
-                        if(bottom){
+                        limit = uiScrollpoint.shift / 100.0 * calcTargetContentHeight();
+                        if(uiScrollpoint.bottom){
                             limit = calcTargetContentHeight() - limit;
                         }
                     }
-                    else if(bottom){
-                        if(absolute){
+                    else if(uiScrollpoint.bottom){
+                        if(uiScrollpoint.absolute){
                             limit = calcTargetContentHeight() - limit;
                         }
                         else{
@@ -104,57 +122,65 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                     return elm[0].offsetTop;
                 }
                 function calcTargetHeight(){
-                    return ( uiScrollpointTarget ? $target[0].offsetHeight : getWindowHeight() );
+                    return ( uiScrollpointTarget ? uiScrollpoint.$target[0].offsetHeight : getWindowHeight() );
                 }
                 function calcTargetContentHeight(){
-                    return ( uiScrollpointTarget ? ($target[0].scrollHeight - $target[0].clientHeight) : getWindowHeight(true) );
+                    return ( uiScrollpointTarget ? (uiScrollpoint.$target[0].scrollHeight - uiScrollpoint.$target[0].clientHeight) : getWindowHeight(true) );
                 }
     
                 function onScroll() {
                     var limit = calcLimit();
     
                     // if pageYOffset is defined use it, otherwise use other crap for IE
-                    var offset = uiScrollpointTarget ? $target[0].scrollTop : getWindowScrollTop();
+                    var offset = uiScrollpoint.getScrollOffset();
                     var distance = null;
+                    var initCheck = angular.isUndefined(uiScrollpoint.past);
                     
-                    if ((!bottom && offset >= limit) || (bottom && offset <= limit)) {
-                        if(!past){
+                    if ((!uiScrollpoint.bottom && offset >= limit) || (uiScrollpoint.bottom && offset <= limit)) {
+                        if(!uiScrollpoint.past){
                             distance = limit - offset;
-                            past = true;
+                            uiScrollpoint.past = true;
                         }
-                        if(!elm.hasClass(scrollpointClass)){
-                            elm.addClass(scrollpointClass);
+                        if(!elm.hasClass(uiScrollpoint.scrollpointClass)){
+                            elm.addClass(uiScrollpoint.scrollpointClass);
                         }
                         fixLimit = limit;
-                    } else if ((!bottom && offset < fixLimit) || (bottom && offset > fixLimit)) {
-                        if(past){
+                    } else if ((!uiScrollpoint.bottom && offset < fixLimit) || (uiScrollpoint.bottom && offset > fixLimit)) {
+                        if(uiScrollpoint.past || initCheck){
                             distance = fixLimit - offset;
-                            past = false;
+                            uiScrollpoint.past = false;
                         }
-                        if(elm.hasClass(scrollpointClass)){
-                            elm.removeClass(scrollpointClass);
+                        if(elm.hasClass(uiScrollpoint.scrollpointClass)){
+                            elm.removeClass(uiScrollpoint.scrollpointClass);
                         }
                     }
-                    if(action && distance !== null){
-                        action(elm, distance * (bottom?-1.0:1.0));
+                    if(uiScrollpoint.action && angular.isFunction(uiScrollpoint.action) && distance !== null){
+                        if(!initCheck){
+                            scope.$apply(function(){
+                                uiScrollpoint.action(elm, distance * (uiScrollpoint.bottom?-1.0:1.0));
+                            });
+                        }
+                        else{
+                            uiScrollpoint.action(elm, distance * (uiScrollpoint.bottom?-1.0:1.0));
+                        }
                     }
                 }
     
                 function reset() {
-                    elm.removeClass(scrollpointClass);
-                    past = bottom; // everything is flipped for scrollpoint-bottom (this would be false for normal scrollpoint)
+                    elm.removeClass(uiScrollpoint.scrollpointClass);
+                    uiScrollpoint.past = uiScrollpoint.bottom; // everything is flipped for scrollpoint-bottom (this would be false for normal scrollpoint)
                     fixLimit = calcLimit();
                     onScroll();
                 }
     
                 scope.$on('scrollpointShouldReset', reset);
     
-                $target.on('scroll', onScroll);
-                onScroll(); // sets the initial state
+                uiScrollpoint.$target.on('scroll', onScroll);
+                elm.ready(onScroll); // sets the initial state
     
                 // Unbind scroll event handler when directive is removed
                 scope.$on('$destroy', function () {
-                    $target.off('scroll', onScroll);
+                    uiScrollpoint.$target.off('scroll', onScroll);
                 });
     
                 scope.$watch('uiScrollpoint', function (newScrollpoint) {
@@ -169,6 +195,75 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                 this.$element = $element;
             }]
         };
+    }]).directive('uiScrollpointPin', [function () {
+        return {
+            restrict: 'A',
+            require: 'uiScrollpoint',
+            priority: 400,
+            link: function (scope, elm, attrs , uiScrollpoint ){
+                var action;
+                var placeholder;
+                var offset = 0;
+                var origCss = {};
+
+                function repositionPinned(){
+                    if(placeholder){
+                        var element = elm;
+                        var scrollOffset = uiScrollpoint.getScrollOffset();
+                        element.css('top', (scrollOffset-offset)+'px');
+                    }
+                }
+
+                // preserve ui-scrollpoint-action
+                if(uiScrollpoint.action){
+                    action = uiScrollpoint.action;
+                }
+
+                // create a scrollpoint action that pins the element
+                uiScrollpoint.action = function(element, distance){
+                    if(distance <= 0 && !placeholder){
+                        // PIN IT
+
+                        // calculate the offset for its absolute positioning
+                        offset = uiScrollpoint.getScrollOffset() - element[0].offsetTop + distance * (uiScrollpoint.bottom?-1.0:1.0);
+                        
+                        // create an invisible placeholder
+                        placeholder = element.clone();
+                        placeholder.css('visibility', 'hidden');
+                        element.after(placeholder);
+
+                        // save the css properties that get changed by pinning functions
+                        origCss.position = element.css('position');
+                        origCss.top = element.css('top');
+
+                        // pin the element
+                        element.addClass('pinned');
+                        element.css('position', 'absolute');
+
+                        // adjust the element's absolute top whenever our target scrolls
+                        uiScrollpoint.$target.on('scroll', repositionPinned);
+                        repositionPinned();
+                    }
+                    else if(distance > 0 && placeholder){
+                        // UNPIN it
+                        element.removeClass('pinned');
+                        element.css('position', origCss.position);
+                        element.css('top', origCss.top);
+                        
+                        // destroy the placeholder
+                        placeholder.remove();
+                        placeholder = undefined;
+
+                        uiScrollpoint.$target.off('scroll', repositionPinned);
+                    }
+
+                    // trigger the ui-scrollpoint-action if there is one
+                    if(action && angular.isFunction(action)){
+                        action(element, distance);
+                    }
+                };
+            }
+        };
     }]);
 
 }());
\ No newline at end of file
diff --git a/dist/scrollpoint.min.js b/dist/scrollpoint.min.js
index ed5681a..6d5d510 100644
--- a/dist/scrollpoint.min.js
+++ b/dist/scrollpoint.min.js
@@ -1,7 +1,7 @@
 /*!
  * angular-ui-scrollpoint
  * https://github.com/angular-ui/ui-scrollpoint
- * Version: 1.2.1 - 2015-11-17T02:53:22.290Z
+ * Version: 1.2.1 - 2015-11-25T22:24:07.196Z
  * License: MIT
  */
-!function(){"use strict";angular.module("ui.scrollpoint",[]).directive("uiScrollpoint",["$window",function(t){function o(){if(angular.isDefined(t.pageYOffset))return t.pageYOffset;var o=document.compatMode&&"BackCompat"!==document.compatMode?document.documentElement:document.body;return o.scrollTop}function n(o){return o?t.document.body.scrollHeight-t.innerHeight:t.innerHeight}return{require:"^?uiScrollpointTarget",scope:{uiScrollpoint:"@",uiScrollpointClass:"@?",uiScrollpointAction:"&?",uiScrollpointBottom:"@"},link:function(e,i,l,r){function u(t){if(t){if("string"==typeof t)if(h="%"==t.charAt(t.length-1),h&&(t=t.substr(0,t.length-1)),"-"===t.charAt(0))m=h,S=-parseFloat(t.substr(1));else if("+"===t.charAt(0))m=h,S=parseFloat(t.substr(1));else{var o=parseFloat(t);!isNaN(o)&&isFinite(o)&&(m=!0,S=o)}else if("number"==typeof t)return t=t.toString(),void u(t)}else m=!1;g=c()}function c(){var t=m?S:s()+S;return h&&m?(t=S/100*f(),C&&(t=f()-t)):C&&(t=m?f()-t:t+i[0].offsetHeight+1-a()),t}function s(){if(!r){var t=i[0].getBoundingClientRect();return t.top+o()}return i[0].offsetTop}function a(){return r?$[0].offsetHeight:n()}function f(){return r?$[0].scrollHeight-$[0].clientHeight:n(!0)}function p(){var t=c(),n=r?$[0].scrollTop:o(),e=null;!C&&n>=t||C&&t>=n?(v||(e=t-n,v=!0),i.hasClass(H)||i.addClass(H),g=t):(!C&&g>n||C&&n>g)&&(v&&(e=g-n,v=!1),i.hasClass(H)&&i.removeClass(H)),b&&null!==e&&b(i,e*(C?-1:1))}function d(){i.removeClass(H),v=C,g=c(),p()}var g,m=!0,h=!1,S=0,v=!1,C=e.uiScrollpointBottom,$=r&&r.$element||angular.element(t),H=e.uiScrollpointClass||"ui-scrollpoint",b=e.uiScrollpointAction?e.uiScrollpointAction():void 0;u(e.uiScrollpoint),e.$on("scrollpointShouldReset",d),$.on("scroll",p),p(),e.$on("$destroy",function(){$.off("scroll",p)}),e.$watch("uiScrollpoint",function(t){u(t),p()})}}}]).directive("uiScrollpointTarget",[function(){return{controller:["$element",function(t){this.$element=t}]}}])}();
\ No newline at end of file
+!function(){"use strict";angular.module("ui.scrollpoint",[]).directive("uiScrollpoint",["$window",function(t){function o(){if(angular.isDefined(t.pageYOffset))return t.pageYOffset;var o=document.compatMode&&"BackCompat"!==document.compatMode?document.documentElement:document.body;return o.scrollTop}function i(o){return o?t.document.body.scrollHeight-t.innerHeight:t.innerHeight}return{require:["uiScrollpoint","^?uiScrollpointTarget"],scope:{uiScrollpoint:"@",uiScrollpointClass:"@?",uiScrollpointAction:"&?",uiScrollpointBottom:"@?"},controller:function(){this.absolute=!0,this.percent=!1,this.shift=0,this.past=void 0,this.bottom=void 0,this.hasTarget=!1,this.$target=void 0,this.scrollpointClass="ui-scrollpoint",this.action=void 0,this.getScrollOffset=function(){return this.hasTarget?this.$target[0].scrollTop:o()}},link:function(n,e,s,l){function r(t){if(t){if("string"==typeof t)if(h.percent="%"==t.charAt(t.length-1),h.percent&&(t=t.substr(0,t.length-1)),"-"===t.charAt(0))h.absolute=h.percent,h.shift=-parseFloat(t.substr(1));else if("+"===t.charAt(0))h.absolute=h.percent,h.shift=parseFloat(t.substr(1));else{var o=parseFloat(t);!isNaN(o)&&isFinite(o)&&(h.absolute=!0,h.shift=o)}else if("number"==typeof t)return t=t.toString(),void r(t)}else h.absolute=!1;m=c()}function c(){var t=h.absolute?h.shift:a()+h.shift;return h.percent&&h.absolute?(t=h.shift/100*p(),h.bottom&&(t=p()-t)):h.bottom&&(t=h.absolute?p()-t:t+e[0].offsetHeight+1-u()),t}function a(){if(!d){var t=e[0].getBoundingClientRect();return t.top+o()}return e[0].offsetTop}function u(){return d?h.$target[0].offsetHeight:i()}function p(){return d?h.$target[0].scrollHeight-h.$target[0].clientHeight:i(!0)}function f(){var t=c(),o=h.getScrollOffset(),i=null,s=angular.isUndefined(h.past);!h.bottom&&o>=t||h.bottom&&t>=o?(h.past||(i=t-o,h.past=!0),e.hasClass(h.scrollpointClass)||e.addClass(h.scrollpointClass),m=t):(!h.bottom&&m>o||h.bottom&&o>m)&&((h.past||s)&&(i=m-o,h.past=!1),e.hasClass(h.scrollpointClass)&&e.removeClass(h.scrollpointClass)),h.action&&angular.isFunction(h.action)&&null!==i&&(s?h.action(e,i*(h.bottom?-1:1)):n.$apply(function(){h.action(e,i*(h.bottom?-1:1))}))}function g(){e.removeClass(h.scrollpointClass),h.past=h.bottom,m=c(),f()}var h=l[0],d=l[1];h.bottom=n.uiScrollpointBottom,h.hasTarget=d?!0:!1,h.$target=d&&d.$element||angular.element(t),h.scrollpointClass=n.uiScrollpointClass||"ui-scrollpoint",h.action=n.uiScrollpointAction?n.uiScrollpointAction():void 0;var m;r(n.uiScrollpoint),n.$on("scrollpointShouldReset",g),h.$target.on("scroll",f),e.ready(f),n.$on("$destroy",function(){h.$target.off("scroll",f)}),n.$watch("uiScrollpoint",function(t){r(t),f()})}}}]).directive("uiScrollpointTarget",[function(){return{controller:["$element",function(t){this.$element=t}]}}]).directive("uiScrollpointPin",[function(){return{restrict:"A",require:"uiScrollpoint",priority:400,link:function(t,o,i,n){function e(){if(l){var t=o,i=n.getScrollOffset();t.css("top",i-r+"px")}}var s,l,r=0,c={};n.action&&(s=n.action),n.action=function(t,o){0>=o&&!l?(r=n.getScrollOffset()-t[0].offsetTop+o*(n.bottom?-1:1),l=t.clone(),l.css("visibility","hidden"),t.after(l),c.position=t.css("position"),c.top=t.css("top"),t.addClass("pinned"),t.css("position","absolute"),n.$target.on("scroll",e),e()):o>0&&l&&(t.removeClass("pinned"),t.css("position",c.position),t.css("top",c.top),l.remove(),l=void 0,n.$target.off("scroll",e)),s&&angular.isFunction(s)&&s(t,o)}}}}])}();
\ No newline at end of file
diff --git a/src/scrollpoint.js b/src/scrollpoint.js
index c6c0cf7..326f9f0 100644
--- a/src/scrollpoint.js
+++ b/src/scrollpoint.js
@@ -17,44 +17,62 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
             return (contentHeight ? ($window.document.body.scrollHeight - $window.innerHeight) : $window.innerHeight);
         }
         return {
-            require: '^?uiScrollpointTarget',
+            require: ['uiScrollpoint', '^?uiScrollpointTarget'],
             scope: {
                 uiScrollpoint: '@',
                 uiScrollpointClass: '@?',
                 uiScrollpointAction: '&?',
-                uiScrollpointBottom: '@'
+                uiScrollpointBottom: '@?'
             },
-            link: function (scope, elm, attrs, uiScrollpointTarget) {
-                var absolute = true,
-                    percent = false,
-                    shift = 0,
-                    past = false,
-                    bottom = scope.uiScrollpointBottom,
-                    fixLimit,
-                    $target = uiScrollpointTarget && uiScrollpointTarget.$element || angular.element($window),
-                    scrollpointClass = scope.uiScrollpointClass || 'ui-scrollpoint',
-                    action = scope.uiScrollpointAction ? scope.uiScrollpointAction() : undefined;
+            controller: function(){
+                this.absolute = true;
+                this.percent = false;
+                this.shift = 0;
+                this.past = undefined;
+
+                this.bottom = undefined;
+                this.hasTarget = false;
+                this.$target = undefined;
+                this.scrollpointClass = 'ui-scrollpoint';
+                this.action = undefined;
+
+                this.getScrollOffset = function(){
+                    return this.hasTarget ? this.$target[0].scrollTop : getWindowScrollTop();
+                };
+            },
+            link: function (scope, elm, attrs, Ctrl) {
+                var uiScrollpoint = Ctrl[0];
+                var uiScrollpointTarget = Ctrl[1];
+                
+                // configure controller with the attributes
+                uiScrollpoint.bottom = scope.uiScrollpointBottom;
+                uiScrollpoint.hasTarget = uiScrollpointTarget ? true : false;
+                uiScrollpoint.$target = uiScrollpointTarget && uiScrollpointTarget.$element || angular.element($window);
+                uiScrollpoint.scrollpointClass = scope.uiScrollpointClass || 'ui-scrollpoint';
+                uiScrollpoint.action = scope.uiScrollpointAction ? scope.uiScrollpointAction() : undefined;
+
+                var fixLimit;
 
                 function setup(scrollpoint) {
                     if (!scrollpoint) {
-                        absolute = false;
+                        uiScrollpoint.absolute = false;
                     } else if (typeof (scrollpoint) === 'string') {
                         // charAt is generally faster than indexOf: http://jsperf.com/indexof-vs-charat
-                        percent = (scrollpoint.charAt(scrollpoint.length-1) == '%');
-                        if(percent){
+                        uiScrollpoint.percent = (scrollpoint.charAt(scrollpoint.length-1) == '%');
+                        if(uiScrollpoint.percent){
                             scrollpoint = scrollpoint.substr(0, scrollpoint.length-1);
                         }
                         if (scrollpoint.charAt(0) === '-') {
-                            absolute = percent;
-                            shift = -parseFloat(scrollpoint.substr(1));
+                            uiScrollpoint.absolute = uiScrollpoint.percent;
+                            uiScrollpoint.shift = -parseFloat(scrollpoint.substr(1));
                         } else if (scrollpoint.charAt(0) === '+') {
-                            absolute = percent;
-                            shift = parseFloat(scrollpoint.substr(1));
+                            uiScrollpoint.absolute = uiScrollpoint.percent;
+                            uiScrollpoint.shift = parseFloat(scrollpoint.substr(1));
                         } else {
                             var parsed = parseFloat(scrollpoint);
                             if (!isNaN(parsed) && isFinite(parsed)) {
-                                absolute = true;
-                                shift = parsed;
+                                uiScrollpoint.absolute = true;
+                                uiScrollpoint.shift = parsed;
                             }
                         }
                     } else if (typeof (scrollpoint) === 'number') {
@@ -67,16 +85,16 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                 setup(scope.uiScrollpoint);
 
                 function calcLimit(){
-                    var limit = absolute ? shift : calcElementTop() + shift;
-                    if(percent && absolute){
+                    var limit = uiScrollpoint.absolute ? uiScrollpoint.shift : calcElementTop() + uiScrollpoint.shift;
+                    if(uiScrollpoint.percent && uiScrollpoint.absolute){
                         // percent only works in absolute mode (absolute mode is forced for %'s in setup())
-                        limit = shift / 100.0 * calcTargetContentHeight();
-                        if(bottom){
+                        limit = uiScrollpoint.shift / 100.0 * calcTargetContentHeight();
+                        if(uiScrollpoint.bottom){
                             limit = calcTargetContentHeight() - limit;
                         }
                     }
-                    else if(bottom){
-                        if(absolute){
+                    else if(uiScrollpoint.bottom){
+                        if(uiScrollpoint.absolute){
                             limit = calcTargetContentHeight() - limit;
                         }
                         else{
@@ -94,57 +112,65 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                     return elm[0].offsetTop;
                 }
                 function calcTargetHeight(){
-                    return ( uiScrollpointTarget ? $target[0].offsetHeight : getWindowHeight() );
+                    return ( uiScrollpointTarget ? uiScrollpoint.$target[0].offsetHeight : getWindowHeight() );
                 }
                 function calcTargetContentHeight(){
-                    return ( uiScrollpointTarget ? ($target[0].scrollHeight - $target[0].clientHeight) : getWindowHeight(true) );
+                    return ( uiScrollpointTarget ? (uiScrollpoint.$target[0].scrollHeight - uiScrollpoint.$target[0].clientHeight) : getWindowHeight(true) );
                 }
     
                 function onScroll() {
                     var limit = calcLimit();
     
                     // if pageYOffset is defined use it, otherwise use other crap for IE
-                    var offset = uiScrollpointTarget ? $target[0].scrollTop : getWindowScrollTop();
+                    var offset = uiScrollpoint.getScrollOffset();
                     var distance = null;
+                    var initCheck = angular.isUndefined(uiScrollpoint.past);
                     
-                    if ((!bottom && offset >= limit) || (bottom && offset <= limit)) {
-                        if(!past){
+                    if ((!uiScrollpoint.bottom && offset >= limit) || (uiScrollpoint.bottom && offset <= limit)) {
+                        if(!uiScrollpoint.past){
                             distance = limit - offset;
-                            past = true;
+                            uiScrollpoint.past = true;
                         }
-                        if(!elm.hasClass(scrollpointClass)){
-                            elm.addClass(scrollpointClass);
+                        if(!elm.hasClass(uiScrollpoint.scrollpointClass)){
+                            elm.addClass(uiScrollpoint.scrollpointClass);
                         }
                         fixLimit = limit;
-                    } else if ((!bottom && offset < fixLimit) || (bottom && offset > fixLimit)) {
-                        if(past){
+                    } else if ((!uiScrollpoint.bottom && offset < fixLimit) || (uiScrollpoint.bottom && offset > fixLimit)) {
+                        if(uiScrollpoint.past || initCheck){
                             distance = fixLimit - offset;
-                            past = false;
+                            uiScrollpoint.past = false;
                         }
-                        if(elm.hasClass(scrollpointClass)){
-                            elm.removeClass(scrollpointClass);
+                        if(elm.hasClass(uiScrollpoint.scrollpointClass)){
+                            elm.removeClass(uiScrollpoint.scrollpointClass);
                         }
                     }
-                    if(action && distance !== null){
-                        action(elm, distance * (bottom?-1.0:1.0));
+                    if(uiScrollpoint.action && angular.isFunction(uiScrollpoint.action) && distance !== null){
+                        if(!initCheck){
+                            scope.$apply(function(){
+                                uiScrollpoint.action(elm, distance * (uiScrollpoint.bottom?-1.0:1.0));
+                            });
+                        }
+                        else{
+                            uiScrollpoint.action(elm, distance * (uiScrollpoint.bottom?-1.0:1.0));
+                        }
                     }
                 }
     
                 function reset() {
-                    elm.removeClass(scrollpointClass);
-                    past = bottom; // everything is flipped for scrollpoint-bottom (this would be false for normal scrollpoint)
+                    elm.removeClass(uiScrollpoint.scrollpointClass);
+                    uiScrollpoint.past = uiScrollpoint.bottom; // everything is flipped for scrollpoint-bottom (this would be false for normal scrollpoint)
                     fixLimit = calcLimit();
                     onScroll();
                 }
     
                 scope.$on('scrollpointShouldReset', reset);
     
-                $target.on('scroll', onScroll);
-                onScroll(); // sets the initial state
+                uiScrollpoint.$target.on('scroll', onScroll);
+                elm.ready(onScroll); // sets the initial state
     
                 // Unbind scroll event handler when directive is removed
                 scope.$on('$destroy', function () {
-                    $target.off('scroll', onScroll);
+                    uiScrollpoint.$target.off('scroll', onScroll);
                 });
     
                 scope.$watch('uiScrollpoint', function (newScrollpoint) {
@@ -159,4 +185,73 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                 this.$element = $element;
             }]
         };
+    }]).directive('uiScrollpointPin', [function () {
+        return {
+            restrict: 'A',
+            require: 'uiScrollpoint',
+            priority: 400,
+            link: function (scope, elm, attrs , uiScrollpoint ){
+                var action;
+                var placeholder;
+                var offset = 0;
+                var origCss = {};
+
+                function repositionPinned(){
+                    if(placeholder){
+                        var element = elm;
+                        var scrollOffset = uiScrollpoint.getScrollOffset();
+                        element.css('top', (scrollOffset-offset)+'px');
+                    }
+                }
+
+                // preserve ui-scrollpoint-action
+                if(uiScrollpoint.action){
+                    action = uiScrollpoint.action;
+                }
+
+                // create a scrollpoint action that pins the element
+                uiScrollpoint.action = function(element, distance){
+                    if(distance <= 0 && !placeholder){
+                        // PIN IT
+
+                        // calculate the offset for its absolute positioning
+                        offset = uiScrollpoint.getScrollOffset() - element[0].offsetTop + distance * (uiScrollpoint.bottom?-1.0:1.0);
+                        
+                        // create an invisible placeholder
+                        placeholder = element.clone();
+                        placeholder.css('visibility', 'hidden');
+                        element.after(placeholder);
+
+                        // save the css properties that get changed by pinning functions
+                        origCss.position = element.css('position');
+                        origCss.top = element.css('top');
+
+                        // pin the element
+                        element.addClass('pinned');
+                        element.css('position', 'absolute');
+
+                        // adjust the element's absolute top whenever our target scrolls
+                        uiScrollpoint.$target.on('scroll', repositionPinned);
+                        repositionPinned();
+                    }
+                    else if(distance > 0 && placeholder){
+                        // UNPIN it
+                        element.removeClass('pinned');
+                        element.css('position', origCss.position);
+                        element.css('top', origCss.top);
+                        
+                        // destroy the placeholder
+                        placeholder.remove();
+                        placeholder = undefined;
+
+                        uiScrollpoint.$target.off('scroll', repositionPinned);
+                    }
+
+                    // trigger the ui-scrollpoint-action if there is one
+                    if(action && angular.isFunction(action)){
+                        action(element, distance);
+                    }
+                };
+            }
+        };
     }]);

From cc8d581b0f057da8dcd4d8fb003911119eebe287 Mon Sep 17 00:00:00 2001
From: Pat Long <plong00@gmail.com>
Date: Wed, 25 Nov 2015 15:42:50 -0800
Subject: [PATCH 2/3] past = undefined in reset

---
 dist/scrollpoint.js     | 4 ++--
 dist/scrollpoint.min.js | 4 ++--
 src/scrollpoint.js      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/dist/scrollpoint.js b/dist/scrollpoint.js
index b04d878..bd8dabb 100644
--- a/dist/scrollpoint.js
+++ b/dist/scrollpoint.js
@@ -1,7 +1,7 @@
 /*!
  * angular-ui-scrollpoint
  * https://github.com/angular-ui/ui-scrollpoint
- * Version: 1.2.1 - 2015-11-25T22:24:07.196Z
+ * Version: 1.2.1 - 2015-11-25T23:37:35.261Z
  * License: MIT
  */
 
@@ -168,7 +168,7 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
     
                 function reset() {
                     elm.removeClass(uiScrollpoint.scrollpointClass);
-                    uiScrollpoint.past = uiScrollpoint.bottom; // everything is flipped for scrollpoint-bottom (this would be false for normal scrollpoint)
+                    uiScrollpoint.past = undefined;
                     fixLimit = calcLimit();
                     onScroll();
                 }
diff --git a/dist/scrollpoint.min.js b/dist/scrollpoint.min.js
index 6d5d510..ec19821 100644
--- a/dist/scrollpoint.min.js
+++ b/dist/scrollpoint.min.js
@@ -1,7 +1,7 @@
 /*!
  * angular-ui-scrollpoint
  * https://github.com/angular-ui/ui-scrollpoint
- * Version: 1.2.1 - 2015-11-25T22:24:07.196Z
+ * Version: 1.2.1 - 2015-11-25T23:37:35.261Z
  * License: MIT
  */
-!function(){"use strict";angular.module("ui.scrollpoint",[]).directive("uiScrollpoint",["$window",function(t){function o(){if(angular.isDefined(t.pageYOffset))return t.pageYOffset;var o=document.compatMode&&"BackCompat"!==document.compatMode?document.documentElement:document.body;return o.scrollTop}function i(o){return o?t.document.body.scrollHeight-t.innerHeight:t.innerHeight}return{require:["uiScrollpoint","^?uiScrollpointTarget"],scope:{uiScrollpoint:"@",uiScrollpointClass:"@?",uiScrollpointAction:"&?",uiScrollpointBottom:"@?"},controller:function(){this.absolute=!0,this.percent=!1,this.shift=0,this.past=void 0,this.bottom=void 0,this.hasTarget=!1,this.$target=void 0,this.scrollpointClass="ui-scrollpoint",this.action=void 0,this.getScrollOffset=function(){return this.hasTarget?this.$target[0].scrollTop:o()}},link:function(n,e,s,l){function r(t){if(t){if("string"==typeof t)if(h.percent="%"==t.charAt(t.length-1),h.percent&&(t=t.substr(0,t.length-1)),"-"===t.charAt(0))h.absolute=h.percent,h.shift=-parseFloat(t.substr(1));else if("+"===t.charAt(0))h.absolute=h.percent,h.shift=parseFloat(t.substr(1));else{var o=parseFloat(t);!isNaN(o)&&isFinite(o)&&(h.absolute=!0,h.shift=o)}else if("number"==typeof t)return t=t.toString(),void r(t)}else h.absolute=!1;m=c()}function c(){var t=h.absolute?h.shift:a()+h.shift;return h.percent&&h.absolute?(t=h.shift/100*p(),h.bottom&&(t=p()-t)):h.bottom&&(t=h.absolute?p()-t:t+e[0].offsetHeight+1-u()),t}function a(){if(!d){var t=e[0].getBoundingClientRect();return t.top+o()}return e[0].offsetTop}function u(){return d?h.$target[0].offsetHeight:i()}function p(){return d?h.$target[0].scrollHeight-h.$target[0].clientHeight:i(!0)}function f(){var t=c(),o=h.getScrollOffset(),i=null,s=angular.isUndefined(h.past);!h.bottom&&o>=t||h.bottom&&t>=o?(h.past||(i=t-o,h.past=!0),e.hasClass(h.scrollpointClass)||e.addClass(h.scrollpointClass),m=t):(!h.bottom&&m>o||h.bottom&&o>m)&&((h.past||s)&&(i=m-o,h.past=!1),e.hasClass(h.scrollpointClass)&&e.removeClass(h.scrollpointClass)),h.action&&angular.isFunction(h.action)&&null!==i&&(s?h.action(e,i*(h.bottom?-1:1)):n.$apply(function(){h.action(e,i*(h.bottom?-1:1))}))}function g(){e.removeClass(h.scrollpointClass),h.past=h.bottom,m=c(),f()}var h=l[0],d=l[1];h.bottom=n.uiScrollpointBottom,h.hasTarget=d?!0:!1,h.$target=d&&d.$element||angular.element(t),h.scrollpointClass=n.uiScrollpointClass||"ui-scrollpoint",h.action=n.uiScrollpointAction?n.uiScrollpointAction():void 0;var m;r(n.uiScrollpoint),n.$on("scrollpointShouldReset",g),h.$target.on("scroll",f),e.ready(f),n.$on("$destroy",function(){h.$target.off("scroll",f)}),n.$watch("uiScrollpoint",function(t){r(t),f()})}}}]).directive("uiScrollpointTarget",[function(){return{controller:["$element",function(t){this.$element=t}]}}]).directive("uiScrollpointPin",[function(){return{restrict:"A",require:"uiScrollpoint",priority:400,link:function(t,o,i,n){function e(){if(l){var t=o,i=n.getScrollOffset();t.css("top",i-r+"px")}}var s,l,r=0,c={};n.action&&(s=n.action),n.action=function(t,o){0>=o&&!l?(r=n.getScrollOffset()-t[0].offsetTop+o*(n.bottom?-1:1),l=t.clone(),l.css("visibility","hidden"),t.after(l),c.position=t.css("position"),c.top=t.css("top"),t.addClass("pinned"),t.css("position","absolute"),n.$target.on("scroll",e),e()):o>0&&l&&(t.removeClass("pinned"),t.css("position",c.position),t.css("top",c.top),l.remove(),l=void 0,n.$target.off("scroll",e)),s&&angular.isFunction(s)&&s(t,o)}}}}])}();
\ No newline at end of file
+!function(){"use strict";angular.module("ui.scrollpoint",[]).directive("uiScrollpoint",["$window",function(t){function o(){if(angular.isDefined(t.pageYOffset))return t.pageYOffset;var o=document.compatMode&&"BackCompat"!==document.compatMode?document.documentElement:document.body;return o.scrollTop}function i(o){return o?t.document.body.scrollHeight-t.innerHeight:t.innerHeight}return{require:["uiScrollpoint","^?uiScrollpointTarget"],scope:{uiScrollpoint:"@",uiScrollpointClass:"@?",uiScrollpointAction:"&?",uiScrollpointBottom:"@?"},controller:function(){this.absolute=!0,this.percent=!1,this.shift=0,this.past=void 0,this.bottom=void 0,this.hasTarget=!1,this.$target=void 0,this.scrollpointClass="ui-scrollpoint",this.action=void 0,this.getScrollOffset=function(){return this.hasTarget?this.$target[0].scrollTop:o()}},link:function(n,e,s,l){function r(t){if(t){if("string"==typeof t)if(h.percent="%"==t.charAt(t.length-1),h.percent&&(t=t.substr(0,t.length-1)),"-"===t.charAt(0))h.absolute=h.percent,h.shift=-parseFloat(t.substr(1));else if("+"===t.charAt(0))h.absolute=h.percent,h.shift=parseFloat(t.substr(1));else{var o=parseFloat(t);!isNaN(o)&&isFinite(o)&&(h.absolute=!0,h.shift=o)}else if("number"==typeof t)return t=t.toString(),void r(t)}else h.absolute=!1;m=c()}function c(){var t=h.absolute?h.shift:a()+h.shift;return h.percent&&h.absolute?(t=h.shift/100*p(),h.bottom&&(t=p()-t)):h.bottom&&(t=h.absolute?p()-t:t+e[0].offsetHeight+1-u()),t}function a(){if(!d){var t=e[0].getBoundingClientRect();return t.top+o()}return e[0].offsetTop}function u(){return d?h.$target[0].offsetHeight:i()}function p(){return d?h.$target[0].scrollHeight-h.$target[0].clientHeight:i(!0)}function f(){var t=c(),o=h.getScrollOffset(),i=null,s=angular.isUndefined(h.past);!h.bottom&&o>=t||h.bottom&&t>=o?(h.past||(i=t-o,h.past=!0),e.hasClass(h.scrollpointClass)||e.addClass(h.scrollpointClass),m=t):(!h.bottom&&m>o||h.bottom&&o>m)&&((h.past||s)&&(i=m-o,h.past=!1),e.hasClass(h.scrollpointClass)&&e.removeClass(h.scrollpointClass)),h.action&&angular.isFunction(h.action)&&null!==i&&(s?h.action(e,i*(h.bottom?-1:1)):n.$apply(function(){h.action(e,i*(h.bottom?-1:1))}))}function g(){e.removeClass(h.scrollpointClass),h.past=void 0,m=c(),f()}var h=l[0],d=l[1];h.bottom=n.uiScrollpointBottom,h.hasTarget=d?!0:!1,h.$target=d&&d.$element||angular.element(t),h.scrollpointClass=n.uiScrollpointClass||"ui-scrollpoint",h.action=n.uiScrollpointAction?n.uiScrollpointAction():void 0;var m;r(n.uiScrollpoint),n.$on("scrollpointShouldReset",g),h.$target.on("scroll",f),e.ready(f),n.$on("$destroy",function(){h.$target.off("scroll",f)}),n.$watch("uiScrollpoint",function(t){r(t),f()})}}}]).directive("uiScrollpointTarget",[function(){return{controller:["$element",function(t){this.$element=t}]}}]).directive("uiScrollpointPin",[function(){return{restrict:"A",require:"uiScrollpoint",priority:400,link:function(t,o,i,n){function e(){if(l){var t=o,i=n.getScrollOffset();t.css("top",i-r+"px")}}var s,l,r=0,c={};n.action&&(s=n.action),n.action=function(t,o){0>=o&&!l?(r=n.getScrollOffset()-t[0].offsetTop+o*(n.bottom?-1:1),l=t.clone(),l.css("visibility","hidden"),t.after(l),c.position=t.css("position"),c.top=t.css("top"),t.addClass("pinned"),t.css("position","absolute"),n.$target.on("scroll",e),e()):o>0&&l&&(t.removeClass("pinned"),t.css("position",c.position),t.css("top",c.top),l.remove(),l=void 0,n.$target.off("scroll",e)),s&&angular.isFunction(s)&&s(t,o)}}}}])}();
\ No newline at end of file
diff --git a/src/scrollpoint.js b/src/scrollpoint.js
index 326f9f0..6d12653 100644
--- a/src/scrollpoint.js
+++ b/src/scrollpoint.js
@@ -158,7 +158,7 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
     
                 function reset() {
                     elm.removeClass(uiScrollpoint.scrollpointClass);
-                    uiScrollpoint.past = uiScrollpoint.bottom; // everything is flipped for scrollpoint-bottom (this would be false for normal scrollpoint)
+                    uiScrollpoint.past = undefined;
                     fixLimit = calcLimit();
                     onScroll();
                 }

From c217507a2d8146acf0440b5e1b109f8bde555eb3 Mon Sep 17 00:00:00 2001
From: Pat Long <plong00@gmail.com>
Date: Thu, 26 Nov 2015 12:21:07 -0800
Subject: [PATCH 3/3] refactored pinning so placeholder takes over scrollpoint
 when pinned.  this allows pinned element more freedom with how it can be
 positioned

---
 demo/index.html         |  9 +++++--
 dist/scrollpoint.js     | 52 +++++++++++++++++++++++++++++------------
 dist/scrollpoint.min.js |  4 ++--
 src/scrollpoint.js      | 50 ++++++++++++++++++++++++++++-----------
 4 files changed, 82 insertions(+), 33 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index d5bcb20..9de314f 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -56,7 +56,7 @@ <h3>What?</h3>
 
                     <div id="scrollExample" class="well" ui-scrollpoint="+100">
                         <p ui-scrollpoint>They see me scrollin...</p>
-                        <p ui-scrollpoint ui-scrollpoint-pin>They see me scrollin and pinnin...</p>
+                        <p ui-scrollpoint ui-scrollpoint-pin>They see me scrollin and {{pinWord}}... <input type="text" ng-model="pinWord" /></p>
                         <p ui-scrollpoint="10%">They see me scrollin (10%)...</p>
                         <p ui-scrollpoint="25%">They see me scrollin (25%)...</p>
                         <p ui-scrollpoint="100%">They see me scrollin (100%)...</p>
@@ -74,6 +74,11 @@ <h3>Why?</h3>
                         <strong>only</strong> adds a
                         <code>ui-scrollpoint</code> class to the element. It is up to you to add the corresponding CSS rules, however it also gives you the ability to add other rules instead if you prefer.
                     </p>
+
+                    <p>
+                        <label for="pinWord">Pinned elements remain bound to scope</label><br/>
+                        <input id="pinWord" type="text" ng-model="pinWord" ng-init="pinWord='pinnin'" />
+                    </p>
                 </div>
             </div>
             <h3>How?</h3>
@@ -193,7 +198,7 @@ <h3>A scrollpoint with a custom action</h3>
                     <div class="well" style="height:200px;overflow:auto; position:relative;"  ui-scrollpoint-target>
                         <div id="scrollExample2" class="well" ui-scrollpoint="+100">
                             <p ui-scrollpoint="-10px" ui-scrollpoint-action="scrollAction">They see me scrollin...</p>
-                            <p ui-scrollpoint ui-scrollpoint-action="scrollAction">They see me scrollin...</p>
+                            <p ui-scrollpoint ui-scrollpoint-action="scrollAction" ui-scrollpoint-pin>They see me scrollin...</p>
                             <p ui-scrollpoint ui-scrollpoint-action="scrollAction">They see me scrollin...</p>
                             <p ui-scrollpoint ui-scrollpoint-action="scrollAction">They see me scrollin...</p>
                             <p ui-scrollpoint ui-scrollpoint-action="scrollAction">They see me scrollin...</p>
diff --git a/dist/scrollpoint.js b/dist/scrollpoint.js
index bd8dabb..a6f4132 100644
--- a/dist/scrollpoint.js
+++ b/dist/scrollpoint.js
@@ -1,7 +1,7 @@
 /*!
  * angular-ui-scrollpoint
  * https://github.com/angular-ui/ui-scrollpoint
- * Version: 1.2.1 - 2015-11-25T23:37:35.261Z
+ * Version: 1.2.1 - 2015-11-26T20:18:50.723Z
  * License: MIT
  */
 
@@ -35,6 +35,7 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                 uiScrollpointBottom: '@?'
             },
             controller: function(){
+                this.enabled = true;
                 this.absolute = true;
                 this.percent = false;
                 this.shift = 0;
@@ -129,6 +130,9 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                 }
     
                 function onScroll() {
+                    if(!uiScrollpoint.enabled){
+                        return;
+                    }
                     var limit = calcLimit();
     
                     // if pageYOffset is defined use it, otherwise use other crap for IE
@@ -195,7 +199,7 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                 this.$element = $element;
             }]
         };
-    }]).directive('uiScrollpointPin', [function () {
+    }]).directive('uiScrollpointPin', ['$compile', function ($compile) {
         return {
             restrict: 'A',
             require: 'uiScrollpoint',
@@ -232,6 +236,36 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                         placeholder.css('visibility', 'hidden');
                         element.after(placeholder);
 
+                        // adjust the placeholder's attributes
+                        placeholder.removeAttr('ui-scrollpoint-pin');
+
+                        // create the unpinning function to use as placeholder's ui-scrollpoint-action
+                        placeholder.attr('ui-scrollpoint-action', 'unpinIt');
+                        scope.unpinIt = function(elementPH, distance){
+                            // UNPIN IT
+                            if(distance > 0 && placeholder){
+                                // stop adjusting absolute position when target scrolls
+                                uiScrollpoint.$target.off('scroll', repositionPinned);
+
+                                // re-enable the scrollpoint on original element
+                                uiScrollpoint.enabled = true;
+
+                                // reset element to unpinned state
+                                element.removeClass('pinned');
+                                element.css('position', origCss.position);
+                                element.css('top', origCss.top);
+                                
+                                // destroy the placeholder
+                                placeholder.remove();
+                                placeholder = undefined;
+                            }
+                        };
+                        // compile the placeholder
+                        $compile(placeholder)(scope);
+
+                        // disable scrollpoint on element
+                        uiScrollpoint.enabled = false;
+
                         // save the css properties that get changed by pinning functions
                         origCss.position = element.css('position');
                         origCss.top = element.css('top');
@@ -240,22 +274,10 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                         element.addClass('pinned');
                         element.css('position', 'absolute');
 
-                        // adjust the element's absolute top whenever our target scrolls
+                        // adjust the element's absolute top whenever target scrolls
                         uiScrollpoint.$target.on('scroll', repositionPinned);
                         repositionPinned();
                     }
-                    else if(distance > 0 && placeholder){
-                        // UNPIN it
-                        element.removeClass('pinned');
-                        element.css('position', origCss.position);
-                        element.css('top', origCss.top);
-                        
-                        // destroy the placeholder
-                        placeholder.remove();
-                        placeholder = undefined;
-
-                        uiScrollpoint.$target.off('scroll', repositionPinned);
-                    }
 
                     // trigger the ui-scrollpoint-action if there is one
                     if(action && angular.isFunction(action)){
diff --git a/dist/scrollpoint.min.js b/dist/scrollpoint.min.js
index ec19821..64e3777 100644
--- a/dist/scrollpoint.min.js
+++ b/dist/scrollpoint.min.js
@@ -1,7 +1,7 @@
 /*!
  * angular-ui-scrollpoint
  * https://github.com/angular-ui/ui-scrollpoint
- * Version: 1.2.1 - 2015-11-25T23:37:35.261Z
+ * Version: 1.2.1 - 2015-11-26T20:18:50.723Z
  * License: MIT
  */
-!function(){"use strict";angular.module("ui.scrollpoint",[]).directive("uiScrollpoint",["$window",function(t){function o(){if(angular.isDefined(t.pageYOffset))return t.pageYOffset;var o=document.compatMode&&"BackCompat"!==document.compatMode?document.documentElement:document.body;return o.scrollTop}function i(o){return o?t.document.body.scrollHeight-t.innerHeight:t.innerHeight}return{require:["uiScrollpoint","^?uiScrollpointTarget"],scope:{uiScrollpoint:"@",uiScrollpointClass:"@?",uiScrollpointAction:"&?",uiScrollpointBottom:"@?"},controller:function(){this.absolute=!0,this.percent=!1,this.shift=0,this.past=void 0,this.bottom=void 0,this.hasTarget=!1,this.$target=void 0,this.scrollpointClass="ui-scrollpoint",this.action=void 0,this.getScrollOffset=function(){return this.hasTarget?this.$target[0].scrollTop:o()}},link:function(n,e,s,l){function r(t){if(t){if("string"==typeof t)if(h.percent="%"==t.charAt(t.length-1),h.percent&&(t=t.substr(0,t.length-1)),"-"===t.charAt(0))h.absolute=h.percent,h.shift=-parseFloat(t.substr(1));else if("+"===t.charAt(0))h.absolute=h.percent,h.shift=parseFloat(t.substr(1));else{var o=parseFloat(t);!isNaN(o)&&isFinite(o)&&(h.absolute=!0,h.shift=o)}else if("number"==typeof t)return t=t.toString(),void r(t)}else h.absolute=!1;m=c()}function c(){var t=h.absolute?h.shift:a()+h.shift;return h.percent&&h.absolute?(t=h.shift/100*p(),h.bottom&&(t=p()-t)):h.bottom&&(t=h.absolute?p()-t:t+e[0].offsetHeight+1-u()),t}function a(){if(!d){var t=e[0].getBoundingClientRect();return t.top+o()}return e[0].offsetTop}function u(){return d?h.$target[0].offsetHeight:i()}function p(){return d?h.$target[0].scrollHeight-h.$target[0].clientHeight:i(!0)}function f(){var t=c(),o=h.getScrollOffset(),i=null,s=angular.isUndefined(h.past);!h.bottom&&o>=t||h.bottom&&t>=o?(h.past||(i=t-o,h.past=!0),e.hasClass(h.scrollpointClass)||e.addClass(h.scrollpointClass),m=t):(!h.bottom&&m>o||h.bottom&&o>m)&&((h.past||s)&&(i=m-o,h.past=!1),e.hasClass(h.scrollpointClass)&&e.removeClass(h.scrollpointClass)),h.action&&angular.isFunction(h.action)&&null!==i&&(s?h.action(e,i*(h.bottom?-1:1)):n.$apply(function(){h.action(e,i*(h.bottom?-1:1))}))}function g(){e.removeClass(h.scrollpointClass),h.past=void 0,m=c(),f()}var h=l[0],d=l[1];h.bottom=n.uiScrollpointBottom,h.hasTarget=d?!0:!1,h.$target=d&&d.$element||angular.element(t),h.scrollpointClass=n.uiScrollpointClass||"ui-scrollpoint",h.action=n.uiScrollpointAction?n.uiScrollpointAction():void 0;var m;r(n.uiScrollpoint),n.$on("scrollpointShouldReset",g),h.$target.on("scroll",f),e.ready(f),n.$on("$destroy",function(){h.$target.off("scroll",f)}),n.$watch("uiScrollpoint",function(t){r(t),f()})}}}]).directive("uiScrollpointTarget",[function(){return{controller:["$element",function(t){this.$element=t}]}}]).directive("uiScrollpointPin",[function(){return{restrict:"A",require:"uiScrollpoint",priority:400,link:function(t,o,i,n){function e(){if(l){var t=o,i=n.getScrollOffset();t.css("top",i-r+"px")}}var s,l,r=0,c={};n.action&&(s=n.action),n.action=function(t,o){0>=o&&!l?(r=n.getScrollOffset()-t[0].offsetTop+o*(n.bottom?-1:1),l=t.clone(),l.css("visibility","hidden"),t.after(l),c.position=t.css("position"),c.top=t.css("top"),t.addClass("pinned"),t.css("position","absolute"),n.$target.on("scroll",e),e()):o>0&&l&&(t.removeClass("pinned"),t.css("position",c.position),t.css("top",c.top),l.remove(),l=void 0,n.$target.off("scroll",e)),s&&angular.isFunction(s)&&s(t,o)}}}}])}();
\ No newline at end of file
+!function(){"use strict";angular.module("ui.scrollpoint",[]).directive("uiScrollpoint",["$window",function(t){function o(){if(angular.isDefined(t.pageYOffset))return t.pageYOffset;var o=document.compatMode&&"BackCompat"!==document.compatMode?document.documentElement:document.body;return o.scrollTop}function i(o){return o?t.document.body.scrollHeight-t.innerHeight:t.innerHeight}return{require:["uiScrollpoint","^?uiScrollpointTarget"],scope:{uiScrollpoint:"@",uiScrollpointClass:"@?",uiScrollpointAction:"&?",uiScrollpointBottom:"@?"},controller:function(){this.enabled=!0,this.absolute=!0,this.percent=!1,this.shift=0,this.past=void 0,this.bottom=void 0,this.hasTarget=!1,this.$target=void 0,this.scrollpointClass="ui-scrollpoint",this.action=void 0,this.getScrollOffset=function(){return this.hasTarget?this.$target[0].scrollTop:o()}},link:function(n,e,s,l){function r(t){if(t){if("string"==typeof t)if(h.percent="%"==t.charAt(t.length-1),h.percent&&(t=t.substr(0,t.length-1)),"-"===t.charAt(0))h.absolute=h.percent,h.shift=-parseFloat(t.substr(1));else if("+"===t.charAt(0))h.absolute=h.percent,h.shift=parseFloat(t.substr(1));else{var o=parseFloat(t);!isNaN(o)&&isFinite(o)&&(h.absolute=!0,h.shift=o)}else if("number"==typeof t)return t=t.toString(),void r(t)}else h.absolute=!1;m=c()}function c(){var t=h.absolute?h.shift:a()+h.shift;return h.percent&&h.absolute?(t=h.shift/100*p(),h.bottom&&(t=p()-t)):h.bottom&&(t=h.absolute?p()-t:t+e[0].offsetHeight+1-u()),t}function a(){if(!g){var t=e[0].getBoundingClientRect();return t.top+o()}return e[0].offsetTop}function u(){return g?h.$target[0].offsetHeight:i()}function p(){return g?h.$target[0].scrollHeight-h.$target[0].clientHeight:i(!0)}function f(){if(h.enabled){var t=c(),o=h.getScrollOffset(),i=null,s=angular.isUndefined(h.past);!h.bottom&&o>=t||h.bottom&&t>=o?(h.past||(i=t-o,h.past=!0),e.hasClass(h.scrollpointClass)||e.addClass(h.scrollpointClass),m=t):(!h.bottom&&m>o||h.bottom&&o>m)&&((h.past||s)&&(i=m-o,h.past=!1),e.hasClass(h.scrollpointClass)&&e.removeClass(h.scrollpointClass)),h.action&&angular.isFunction(h.action)&&null!==i&&(s?h.action(e,i*(h.bottom?-1:1)):n.$apply(function(){h.action(e,i*(h.bottom?-1:1))}))}}function d(){e.removeClass(h.scrollpointClass),h.past=void 0,m=c(),f()}var h=l[0],g=l[1];h.bottom=n.uiScrollpointBottom,h.hasTarget=g?!0:!1,h.$target=g&&g.$element||angular.element(t),h.scrollpointClass=n.uiScrollpointClass||"ui-scrollpoint",h.action=n.uiScrollpointAction?n.uiScrollpointAction():void 0;var m;r(n.uiScrollpoint),n.$on("scrollpointShouldReset",d),h.$target.on("scroll",f),e.ready(f),n.$on("$destroy",function(){h.$target.off("scroll",f)}),n.$watch("uiScrollpoint",function(t){r(t),f()})}}}]).directive("uiScrollpointTarget",[function(){return{controller:["$element",function(t){this.$element=t}]}}]).directive("uiScrollpointPin",["$compile",function(t){return{restrict:"A",require:"uiScrollpoint",priority:400,link:function(o,i,n,e){function s(){if(r){var t=i,o=e.getScrollOffset();t.css("top",o-c+"px")}}var l,r,c=0,a={};e.action&&(l=e.action),e.action=function(i,n){0>=n&&!r&&(c=e.getScrollOffset()-i[0].offsetTop+n*(e.bottom?-1:1),r=i.clone(),r.css("visibility","hidden"),i.after(r),r.removeAttr("ui-scrollpoint-pin"),r.attr("ui-scrollpoint-action","unpinIt"),o.unpinIt=function(t,o){o>0&&r&&(e.$target.off("scroll",s),e.enabled=!0,i.removeClass("pinned"),i.css("position",a.position),i.css("top",a.top),r.remove(),r=void 0)},t(r)(o),e.enabled=!1,a.position=i.css("position"),a.top=i.css("top"),i.addClass("pinned"),i.css("position","absolute"),e.$target.on("scroll",s),s()),l&&angular.isFunction(l)&&l(i,n)}}}}])}();
\ No newline at end of file
diff --git a/src/scrollpoint.js b/src/scrollpoint.js
index 6d12653..678bdf6 100644
--- a/src/scrollpoint.js
+++ b/src/scrollpoint.js
@@ -25,6 +25,7 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                 uiScrollpointBottom: '@?'
             },
             controller: function(){
+                this.enabled = true;
                 this.absolute = true;
                 this.percent = false;
                 this.shift = 0;
@@ -119,6 +120,9 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                 }
     
                 function onScroll() {
+                    if(!uiScrollpoint.enabled){
+                        return;
+                    }
                     var limit = calcLimit();
     
                     // if pageYOffset is defined use it, otherwise use other crap for IE
@@ -185,7 +189,7 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                 this.$element = $element;
             }]
         };
-    }]).directive('uiScrollpointPin', [function () {
+    }]).directive('uiScrollpointPin', ['$compile', function ($compile) {
         return {
             restrict: 'A',
             require: 'uiScrollpoint',
@@ -222,6 +226,36 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                         placeholder.css('visibility', 'hidden');
                         element.after(placeholder);
 
+                        // adjust the placeholder's attributes
+                        placeholder.removeAttr('ui-scrollpoint-pin');
+
+                        // create the unpinning function to use as placeholder's ui-scrollpoint-action
+                        placeholder.attr('ui-scrollpoint-action', 'unpinIt');
+                        scope.unpinIt = function(elementPH, distance){
+                            // UNPIN IT
+                            if(distance > 0 && placeholder){
+                                // stop adjusting absolute position when target scrolls
+                                uiScrollpoint.$target.off('scroll', repositionPinned);
+
+                                // re-enable the scrollpoint on original element
+                                uiScrollpoint.enabled = true;
+
+                                // reset element to unpinned state
+                                element.removeClass('pinned');
+                                element.css('position', origCss.position);
+                                element.css('top', origCss.top);
+                                
+                                // destroy the placeholder
+                                placeholder.remove();
+                                placeholder = undefined;
+                            }
+                        };
+                        // compile the placeholder
+                        $compile(placeholder)(scope);
+
+                        // disable scrollpoint on element
+                        uiScrollpoint.enabled = false;
+
                         // save the css properties that get changed by pinning functions
                         origCss.position = element.css('position');
                         origCss.top = element.css('top');
@@ -230,22 +264,10 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                         element.addClass('pinned');
                         element.css('position', 'absolute');
 
-                        // adjust the element's absolute top whenever our target scrolls
+                        // adjust the element's absolute top whenever target scrolls
                         uiScrollpoint.$target.on('scroll', repositionPinned);
                         repositionPinned();
                     }
-                    else if(distance > 0 && placeholder){
-                        // UNPIN it
-                        element.removeClass('pinned');
-                        element.css('position', origCss.position);
-                        element.css('top', origCss.top);
-                        
-                        // destroy the placeholder
-                        placeholder.remove();
-                        placeholder = undefined;
-
-                        uiScrollpoint.$target.off('scroll', repositionPinned);
-                    }
 
                     // trigger the ui-scrollpoint-action if there is one
                     if(action && angular.isFunction(action)){