Ionic 5 Angular 10 Hide Header on Scroll

[fathanyr]

Thank’s for hirenkorat3
Cause of your post about hiding header on scroll. i able to create it in my project

This code improved for Ionic 5 Angular 10

Demo:

in ts file

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

export class HideHeaderPage {
  @ViewChild("header") header: HTMLElement;

  constructor(
    public element: ElementRef, 
    public renderer: Renderer2
   ) {
  }

  // in my case i'm using ionViewWillEnter
  ionViewWillEnter() {
    this.renderer.setStyle(this.header['el'], 'webkitTransition', 'top 700ms');
  }

  onContentScroll(event) {
    if (event.detail.scrollTop >= 50) {
      this.renderer.setStyle(this.header['el'], 'top', '-76px');
    } else {
      this.renderer.setStyle(this.header['el'], 'top', '20px');
    }
  }
}

in html file

<ion-header #header>
  <ion-navbar>
    <ion-title>
      Ionic Header
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content scrollEvents="true" (ionScroll)='onContentScroll($event)'>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum nam totam recusandae, iusto consequuntur quibusdam
    aliquid voluptate, placeat qui explicabo optio facilis similique doloribus aperiam animi voluptas, unde repellat
    sint?</p>
</ion-content>

reference from :Hide Header and Footer on Scrolling with Animation