Hide Header and Footer on Scrolling with Animation

showcase
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

9 Likes
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

8

Very cooooool, the animation is smooth, superb. thank you thank you so much

1 Like
9

Getting same issue … did you find the solution ?

11

Has anybody had success running this with Ionic 5 and Angular 10? Granted I’m very new at this, but I can’t get it to work despite following the excellent tutorial. I receive: Msg: Can’t bind to ‘header’ since it isn’t a known property of ‘ion-content’. I don’t think it’s even getting to the Directive because I don’t get the console message from console.log(‘Hello HideHeaderDirective Directive’);

1 Like
12

No, and they won’t. In fact, it won’t work with any Angular version past 8.x, as it relies on Renderer, which was deprecated in v4 and removed in v9.

13

Thanks for the update. I did notice that renderer was replaced with renderer2. I was hoping the new renderer2 using setStyle vs renderer’s setElementStyle would do the trick…nope!. Bummer!!

1 Like