Hide and show header with scrolling in ionic

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

}

6 Likes

Hey, this is not a bad solution, but there are a couple of issues.

Ion Refresher and Ion Infinite Scrolling doesnt work properly anymore

this is working fine…i really appreciated