Angular scrollTop

Do something when window is scrolled past a certain point.

by Adam Doherty

HTML

<div ng-app="myApp" ng-controller="myCtrl">
    <div id="container" ng-class="{'test' : scroll > 100}" scroll-position="scroll"></div>
</div>

CSS

#container{
    height: 1000px;
    width: 250px;
    background-color: red;
}

.test{
    background-color: yellow !important;
}

JavaScript

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $window){
    $scope.scroll = 0;
});

app.directive('scrollPosition', function($window) {
  return {
    scope: {
      scroll: '=scrollPosition'
    },
    link: function(scope, element, attrs) {
      var windowEl = angular.element($window);
      var handler = function() {
        scope.scroll = document.body.scrollTop;
      }
      windowEl.on('scroll', scope.$apply.bind(scope, handler));
      handler();
    }
  };
});