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.
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(); }); }
Yes I saw many headers on website as I saw very good header on Best Assignment Help Online website I came here to get help in my assignment but his website header is so lovely now I see coding in your blog it is very difficult make it.
ReplyDelete