A simple Ionic 3 Directive that will allow the header to be shrunk while the user is scrolling like in many apps such as Facebook, Twitter, linkedIn and others…

From Wolar app available in Play Store

Follow these easy steps and you will achieve the result above:

First, generate an ionic directive using the command and call it whatever you want. I’m using “ScrollHide” as a name:

|ionic generate directive ScrollHide

Then copy the content of this gist to your generated Directive:

And import the DirectivesModule into your app.module.ts:

Finally, in your page.html , add your directive that you generated like the following:

Make sure the <ion-content> has the fullscreen and #pageContent attributes, et VOILA! Very simple!

Inspired from Gregor Srdic’s story, I tried to make his code work for Ionic 3 but no chance! Thanks for the solution.