AngularJS HeaderPin 2

In this example below you will see how to do a AngularJS HeaderPin 2 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" id="page" >

    <header id="myHeader" header-pin-scroll header-pin-id-to-stick='stickyElement' header-pin-classname='pinned' ></header>
  <section2 id="stickyElement"  >.</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-2-gLoQPW */
    #page {
    height: 1200px;
}

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

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

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

}

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



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

app.directive("headerPinScroll", function ($window, $document) {
  return {
                restrict: "A",
                scope: {
                    headerPinIdToStick: "@headerPinIdToStick",
                  headerPinClassname:"@headerPinClassname"
             
                  
                },
    link: function(scope, element, attrs) {
    
    
                var CLASS_NAME_PIN_STICKY =  attrs.headerPinClassname;
                var ELEMENT_ID_TO_STICK = attrs.headerPinIdToStick;

                var queryResult = $document[0].getElementById(ELEMENT_ID_TO_STICK);
                var wrappedID = angular.element(queryResult);
                console.log('element:', element);

                var fnSetCorrectHeaderPin = function()  {
//                    console.log('called:');
                    var hasClassPinned = wrappedID.hasClass(CLASS_NAME_PIN_STICKY);
                    if ( this.outerWidth  > 1024) {
                        if (!hasClassPinned) {
                            wrappedID.addClass(CLASS_NAME_PIN_STICKY);
                        }
                        return;
                    }
                    if (this.pageYOffset >= element[0].clientHeight) {
                        if ( !hasClassPinned ) {
                            wrappedID.addClass(CLASS_NAME_PIN_STICKY);
                        }
                    } else {
                        if ( hasClassPinned) {
                            wrappedID.removeClass(CLASS_NAME_PIN_STICKY);
                        }
                    }
                };

                angular.element($window).bind('scroll', fnSetCorrectHeaderPin );
                angular.element($window).bind('load', fnSetCorrectHeaderPin );
                angular.element($window).bind('resize', fnSetCorrectHeaderPin );
  }};
});

Comments