AngularJS HeaderPin

/*Downloaded from https://www.codeseek.co/hspindler/angularjs-headerpin-zopozJ */
    #page {
    height: 1200px;
}

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

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

section2 {
    height: 20px;
    background-color: lightblue;

}

.pin {
    
 position: fixed; 
left: 0px;
right: 0px;
top: -0px; 
}

.min section {
    background-color: pink;
}

/*Downloaded from https://www.codeseek.co/hspindler/angularjs-headerpin-zopozJ */
    app = angular.module('myApp', []);

app.directive("scroll", function ($window, $document) {
    return function(scope, element, attrs) { 
    var queryResult = $document[0].getElementById("myHeader")
    var wrappedID = angular.element(queryResult);
    var logoHeaderHeight = wrappedID[0].clientHeight;
    var logoHeaderWidth = wrappedID[0].clientWidth;
    console.log('wrappedID:',logoHeaderHeight,logoHeaderWidth);

        angular.element($window).bind("scroll", function() {
             if (this.pageYOffset >= logoHeaderHeight) {
                 scope.boolChangeClass = true;
                 console.log('Scrolled below header.');
             } else {
                 scope.boolChangeClass = false;
                 console.log('Header is in view.');
             }
            scope.$apply();
        });
    };
  });

  app.directive("pinme", function ($window, $document) {
    return function(scope, element, attrs) {
    
    var queryResult = $document[0].getElementById("stick")
    var wrappedID = angular.element(queryResult);
    var logoHeaderHeight =element.clientHeight;
    var logoHeaderWidth = element.clientWidth;
    console.log('element:', element);

        angular.element($window).bind("scroll", function() {
             if (this.pageYOffset >= element[0].clientHeight) {
                 scope.boolChangeClass = true;
                 console.log('_Scrolled below header.',this.pageYOffset, element[0].clientHeight);
               wrappedID.addClass('pin');
             } else {
                 scope.boolChangeClass = false;
                 console.log('_Header is in view.',this.pageYOffset, element[0].clientHeight);
               wrappedID.removeClass('pin');
             } 
            scope.$apply();
        });
    };

});