scroll.directive.js

.directive('scrollPosition', ['$window', function($window) {
        return {
            scope: {
                target: '=scrollPosition'
            },
            link: function (scope, element) {
                // Detect request animation frame
                var scroll = window.requestAnimationFrame ||
                             window.webkitRequestAnimationFrame ||
                             window.mozRequestAnimationFrame ||
                             window.msRequestAnimationFrame ||
                             window.oRequestAnimationFrame ||
                             // IE Fallback, you can even fallback to onscroll
                             function(callback){ window.setTimeout(callback, 1000/60) };

               var lastPosition = -1;
               function loop(){
                   // Avoid calculations if not needed
                   if (lastPosition == window.pageYOffset) {
                       scroll(loop);
                       return false;
                   } 
                   else {
                       lastPosition = window.pageYOffset;
                       if (lastPosition < scope.target) {
                            element.removeClass('default').addClass('transparent');
                        } else {
                            element.removeClass('transparent').addClass('default');
                        }
                   }
                   scroll(loop);
               }

               loop();              
            }
        };
    }]);