Angular: CSS styling

http://angularjs.org/

HTML

<div ng-app="myApp" scroll id="page">

    <header></header>
    <section></section>
    
</div>

CSS

#page {
    height: 1000px;
}

header {
    height: 100px;
    background-color: grey;
}

section {
    height: 900px;
    background-color: lightgrey;
}

.min section {
    background-color: pink;
}

JavaScript

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.');
             }
        });
    };
});