<div ng-app="myApp" scrollXX id="page" ng-class="{min:boolChangeClass}">
<header id="myHeader" pinme ></header>
<section2 id="stick" >.</section2>
<section>
1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10
</section>
</div>
/*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();
});
};
});