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 ngClass will trigger the header size change with animation.
Source Code      DEMO

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;
}

.header_nav--big {
    height:100px;   
}

.header_nav--small {
   height:40px;
}

Script

Here observe ngClass attribute. NgZone is updating the template
import { Component } from '@angular/core';
import { NgZone } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div [ngClass]="{'header_nav':true, 'header_nav--big':!isShrunk, 'header_nav--small':isShrunk}">nav here</div>
  `
})
export class AppComponent {
  isShrunk: boolean = false;

  constructor(zone: NgZone) {
    window.onscroll = () => {
      zone.run(() => {
        if(window.pageYOffset > 0) {
             this.isShrunk = true;
        } else {
             this.isShrunk = false;
        }
      });
    }
  }

}

0 comments:

Blogroll

Follow this blog by Email

Popular Posts