Hide Header and Footer on Scrolling with Animation



generate directive

ionic g directive HideHeader

and copy below code in hide-header.ts file

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

  selector: '[hide-header]', // Attribute selector
  host: {
    '(ionScroll)': 'onContentScroll($event)'

export class HideHeaderDirective {
  @Input("header") header: HTMLElement;
  @Input("footer") footer: HTMLElement;
  constructor(public element: ElementRef, public renderer: Renderer) {
    console.log('Hello HideHeaderDirective Directive');
  ngOnInit() {
    this.renderer.setElementStyle(this.header, 'webkitTransition', 'top 700ms');
    this.renderer.setElementStyle(this.footer, 'webkitTransition', 'bottom 700ms');
  onContentScroll(event) {
    if (event.directionY == "down") {
      this.renderer.setElementStyle(this.header, 'top', '-56px');
      this.renderer.setElementStyle(this.footer, 'bottom', '-56px');
    else {
      this.renderer.setElementStyle(this.header, 'top', '0px');
      this.renderer.setElementStyle(this.footer, 'bottom', '0px');

and simply add directive to any header and footer in page

<ion-header #header>
      Ionic Header
<ion-content fullscreen hide-header [header]="header" [footer]="footer">
<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
<ion-footer #footer>
      Ionic Footer

reference from : https://github.com/samarthagarwal/ScrollingHeader

Ion footer hiding
Receiving IonHeader instead of HTMLElement

please share your thought regarding animation improvement or alternate way for it.


Very cool, the animation looks nice and smooth

1 Like

How can i do it for sub header?


I am getting the following error, on the ngInit function. Need some help, anyone?

ERROR TypeError: Cannot set property ‘webkitTransition’ of undefined
at EmulatedEncapsulationDomRenderer2.push…/node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setStyle (vendor.js:66832)
at DebugRenderer2.push…/node_modules/@angular/core/fesm5/core.js.DebugRenderer2.setStyle (vendor.js:58175)
at RendererAdapter.push…/node_modules/@angular/core/fesm5/core.js.RendererAdapter.setElementStyle (vendor.js:55711)
at HideHeaderDirective.push…/src/app/directives/hideheader/hide-header.directive.ts.HideHeaderDirective.ngOnInit (explore-explore-module.js:29)
at checkAndUpdateDirectiveInline (vendor.js:55940)
at checkAndUpdateNodeInline (vendor.js:57204)
at checkAndUpdateNode (vendor.js:57166)
at debugCheckAndUpdateNode (vendor.js:57800)
at debugCheckDirectivesFn (vendor.js:57760)
at Object.eval [as updateDirectives] (ExplorePage.html:24)


perhaps this error occurs because of slow html rendering and binding component process. somehow ngoninit() not able to get HTML element of header so i suggest you to check basic value validation for header like if(this.header) then call setstyle() or you can try settimeout() method.


The setTimeOut didn’t fix it. I’ve described my error in detail, please check this post