Scroll To hide Header

app.module.ts


import { HideHeaderDirective  } from "../directives/hide-header/hide-header";


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    HideHeaderDirective,
]


ionic g directive HideHeader


import { Directive, Input, ElementRef, Renderer } from '@angular/core';

@Directive({
  selector: '[hide-header]', // Attribute selector
  host: {
    '(ionScroll)': 'onContentScroll($event)'
  }
})
export class HideHeaderDirective {
  @Input("header") header: HTMLElement;
  headerHeight;
  scrollContent;
  oldScrollTop: number = 0; //fab
 
  constructor(public element: ElementRef, public renderer: Renderer) {
    console.log('Hello HideHeaderDirective Directive');
  }
  ngOnInit() {
    this.headerHeight = this.header.clientHeight;
    this.scrollContent = this.element.nativeElement.getElementsByClassName("scroll-content")[0];
    this.renderer.setElementStyle(this.header, "webkitTransition", "transform 500ms, opacity 500ms");
  }

  onContentScroll(event) {
    if (event.scrollTop - this.oldScrollTop > 10) {
      this.renderer.setElementStyle(this.header, "opacity", "0");     
      this.renderer.setElementStyle(this.scrollContent, "margin-top", "0px")
      this.renderer.setElementStyle(this.header, "webkitTransform", "scale3d(1.5,1,1.2)");

    }
    else if (event.scrollTop - this.oldScrollTop < 0) {     
      this.renderer.setElementStyle(this.header, "opacity", "1");
      this.renderer.setElementStyle(this.scrollContent, "margin-top", "56px")
      this.renderer.setElementStyle(this.header, "webkitTransform", "scale3d(1,1,1)");
    }
    this.oldScrollTop = event.scrollTop;
  }
}




HTML

<ion-header #head>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title >Offers</ion-title>
 
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content  hide-header [header]="head">


</ion-content>