AngularJS HeaderPin

In this example below you will see how to do a AngularJS HeaderPin with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by hspindler, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hspindler ©
  • HTML
  • CSS
  • JavaScript
    <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();
        });
    };

});

Comments