Hide Header and Footer on Scrolling with Animation

#1

Demo:
infinity

generate directive

ionic g directive HideHeader

and copy below code in hide-header.ts file

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;
  @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>
  <ion-navbar>
    <ion-title>
      Ionic Header
    </ion-title>
  </ion-navbar>
</ion-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
    sint?</p>
</ion-content>
<ion-footer #footer>
  <ion-navbar>
    <ion-title>
      Ionic Footer
    </ion-title>
  </ion-navbar>
</ion-footer>

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

2 Likes
Ion footer hiding
Receiving IonHeader instead of HTMLElement
#2

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

#3

Very cool, the animation looks nice and smooth

1 Like
#4

How can i do it for sub header?

#5

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)

#6

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.

#7

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