it is working fine.
in .scsss file
.scroll-content{
top:-56px !important;
padding-top: 60px !important;
}
.hide-header{
transition : top 0.25s ease;
top: -56px;
}
.show-header{
transition : top 0.25s ease;
top: 0px;
}
in .html file
<ion-header [ngClass]="{'hide-header':showheader,'show-header':hideheader}">
<ion-navbar>
<ion-title>Show and Hide Header</ion-title>
</ion-navbar>
</ion-header>
in .ts file
import { Component,ViewChild } from ‘@angular/core’;
import {ElementRef,Renderer } from ‘@angular/core’;
import { NavController, NavParams ,Content} from ‘ionic-angular’;
import { SessionDetailPage } from ‘…/session-detail/session-detail’;
@Component({
selector: ‘your_selector’,
templateUrl: ‘your.html’
})
export class YourPage {
@ViewChild(Content) content: Content;
start = 0;
threshold = 100;
slideHeaderPrevious = 0;
ionScroll:any;
showheader:boolean;
hideheader:boolean;
headercontent:any;
constructor(public navCtrl: NavController,public renderer: Renderer ,public myElement: ElementRef,public navParams: NavParams) {
this.showheader =false;
this.hideheader = true;
}
ngOnInit() {
// Ionic scroll element
this.ionScroll = this.myElement.nativeElement.getElementsByClassName(‘scroll-content’)[0];
// On scroll function
this.ionScroll.addEventListener(“scroll”, () => {
if(this.ionScroll.scrollTop - this.start > this.threshold) {
this.showheader =true;
this.hideheader = false;
} else {
this.showheader =false;
this.hideheader = true;
}
if (this.slideHeaderPrevious >= this.ionScroll.scrollTop - this.start) {
this.showheader =false;
this.hideheader = true;
}
this.slideHeaderPrevious = this.ionScroll.scrollTop - this.start;
});
}
}