Press "Enter" to skip to content

[ionic] An Angular Directive To Make The Header Hide With Scrolling

ionic-scrolling-header is an angular directive to make the header hide using the scroll.

hide navbar on scroll down angular, angular sticky header on scroll, hide header on scroll up and visible on scroll down animation in react native, sticky header on scroll javascript

How to make use of it:


  • npm install ionic-scrolling-header --save

  • add to your module import {ScrollingHeaderModule} from 'ionic-scrolling-header';

  • add @ViewChild(Content) content: Content; in your component

  • and add in your template

<ion-header [scrollingHeader]='content'> <ion-navbar> <ion-title> Contact </ion-title> </ion-navbar> </ion-header>


hide app header with scrolling, ionic-scrolling-header Plugin/Github, react hide header on scroll, smooth header fixed on scroll

See Demo And Download

Official Website(keephacking): Click Here

This superior jQuery/javascript plugin is developed by keephacking. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.