Bind class toggle to window scroll event

Question

When a user scrolls their browser window below a certain point, I am toggling the class of the #page div.

What I have done so far works fine:

http://jsfiddle.net/eTTZj/29/

<div ng-app="myApp" scroll id="page">      <header></header>     <section></section>  </div>  app = angular.module('myApp', []); app.directive("scroll", function ($window) {     return function(scope, element, attrs) {         angular.element($window).bind("scroll", function() {              if (this.pageYOffset >= 100) {                  element.addClass('min');                  console.log('Scrolled below header.');              } else {                  element.removeClass('min');                  console.log('Header is in view.');              }         });     }; }); 

(when they scroll their window below the header, 100px, the class is toggled)

Although, correct me if I'm wrong, I feel that this is not the correct way to be doing this with Angular.

Instead, I presumed that the best method for doing this would be by using ng-class and storing a boolean value in the scope. Something like this:

<div ng-app="myApp" scroll id="page" ng-class="{min: boolChangeClass}">      <header></header>     <section></section>  </div>  app = angular.module('myApp', []); app.directive("scroll", function ($window) {     return function(scope, element, attrs) {         angular.element($window).bind("scroll", function() {              if (this.pageYOffset >= 100) {                  scope.boolChangeClass = true;                  console.log('Scrolled below header.');              } else {                  scope.boolChangeClass = false;                  console.log('Header is in view.');              }         });     }; }); 

Although this is not dynamic, if I change the value of scope.boolChangeClass in the scroll callback, then the ng-class is not updating.

So my question is: how is best to toggle the class of #page, using AngularJS, when the user scrolls below a certain point?

Answer 1

Thanks to Flek for answering my question in his comment:

http://jsfiddle.net/eTTZj/30/

<div ng-app="myApp" scroll id="page" ng-class="{min:boolChangeClass}">      <header></header>     <section></section>  </div>  app = angular.module('myApp', []); app.directive("scroll", function ($window) {     return function(scope, element, attrs) {         angular.element($window).bind("scroll", function() {              if (this.pageYOffset >= 100) {                  scope.boolChangeClass = true;              } else {                  scope.boolChangeClass = false;              }             scope.$apply();         });     }; }); 

Answer 2

Why do you all suggest heavy scope operations? I don't see why this is not an "angular" solution:

.directive('changeClassOnScroll', function ($window) {   return {     restrict: 'A',     scope: {         offset: "@",         scrollClass: "@"     },     link: function(scope, element) {         angular.element($window).bind("scroll", function() {             if (this.pageYOffset >= parseInt(scope.offset)) {                 element.addClass(scope.scrollClass);             } else {                 element.removeClass(scope.scrollClass);             }         });     }   }; }) 

So you can use it like this:

<navbar change-class-on-scroll offset="500" scroll-class="you-have-scrolled-down"></navbar> 

or

<div change-class-on-scroll offset="500" scroll-class="you-have-scrolled-down"></div>