Ionic3 hiding header and footer on content scroll

Many mobile apps, such as Twitter, Facebook or LinkedIn, have a large scrolling areas and to make the most of the small screens on mobile devices, they often hide either header or footer when user scrolls down to load more content.

Here is a simple directive for Ionic3 framework, that can help you easily achieve this effect:

To use it, you must first declare it in your app module inside app.module.ts:

Define config options in your page.ts:

And finally add directive to header and footer elements on the page.html:

Pay attention to #pageContent id and fullscreen atribute on the content element.

That’s it!