You might have seen this effect in many website. Initially header looks big, when user scroll the page then the header will shrink with animation. Find the following example to implement this feature with AngularJS.

Here find below two classes big and small. Specify required width in these classes. CSS3 transition property  gives proper animation. Changing class with ng-class will trigger the header size change with animation.

CSS

#header_nav {
    width:100%;
    background-color:#666;
    position:fixed;
    top:0;
    left:0;
   -webkit-transition:0.5s linear all;
   -moz-transition:0.5s linear all;
   -o-transition:0.5s linear all;
   transition:0.5s linear all;
}

.big {
    height:100px;   
}

.small {
   height:40px;
}

Script

function myCtrl($scope, $window) {
   $scope.navClass = 'big';
   angular.element($window).bind(
    "scroll", function() {
         console.log(window.pageYOffset);
         if(window.pageYOffset > 0) {
           $scope.navClass = 'small';
         } else {
           $scope.navClass = 'big';
         }
         $scope.$apply();
   });  
}

0 comments:

Blogroll

Follow this blog by Email

Popular Posts