ionic3 Elastic Header

npm install ionic2-elastic-header --save



app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { MyList } from '../pages/myList/myList';
import { ElasticHeaderModule } from "ionic2-elastic-header/dist";

@NgModule({
  declarations: [
    MyApp,
    MyList
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    ElasticHeaderModule //Add ElasticHeaderModule here
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    MyList
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})

export class AppModule {}

myList.html


<ion-header [elastic-header]="myContent">
  <ion-navbar>
    <ion-title>My List</ion-title>
  </ion-navbar>
</ion-header>
<!--Add the fullscreen attribute and #<componentID> -->
<ion-content class="home" fullscreen #myContent>
  <ion-list>
    <ion-item *ngFor="let item of items">
      <ion-icon name="person" item-left></ion-icon>
      {{item.name}}
    </ion-item>
  </ion-list>

</ion-content>


From here you will get more: https://www.npmjs.com/package/ionic2-elastic-header