Ionic2 gradient hidden navigation bar | title bar

Nonsense less say directly on the code ....

Import the namespaces you need to use Viewchild,content

Import {Component, viewchild} from ' @angular/core '; import {navcontroller, Modalcontroller, Toastcontroller, Content} f Rom ' ionic-angular '; @Component ({  selector: ' Home ',  templateurl: ' home.html ',}) Export Class Homepage {  @　　Viewchild (Content) content:content; Gets the instance object of the interface content
Gets the top value of the slide and makes the title bar transparent at 200px  Onpagescroll (event) {let    position = event.target.scrolltop;//Take sliding top value      This.transrate = 2-position/100;    document.getElementById ("Home_title"). Style.opacity = This.transrate.toString ();    //  this.content.resize ();    Console.log (position);  }
Interface initialization when registering interface sliding event  Ngafterviewinit () {    this.content.addScrollListener (this.onpagescroll);  }}




Interface code  
Add an ID to the title bar
<ion-header style= "opacity:0" id= "Home_title" >

　　

Ionic2 gradient hidden navigation bar | title bar