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

}

3 comments:

  1. Thanks for sharing this quality information with us.
    private sex personal

    ReplyDelete
  2. Poor wiring can lead to various electrical problems. From power outage to electrical surges and appliance malfunctioning.
    In order to maintain your electrical system, it is vital to call professionals for Electrical services Converse TX and get your wiring checked at least every 6 months. Give us a call now!

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts