Bind class toggle to window scroll event

angularjs, angularjs-directive

Solution

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>

Problem

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?

Original source