How to hide the header and tabs on scroll

I would try something like that:

http://ionicframework.com/docs/api/directive/ionContent/
You can add a function to the on-scroll attribute of the ion-content.

if you scroll -> set variable on scope , e.g. scrolling = true and add ng-show="!scrolling" to the bars

then use on-scroll-complete of the ion-content to pass a function, to reset scrolling to false.

Do not forget to use:
http://ionicframework.com/docs/api/service/$ionicScrollDelegate/

$ionicScrollDelegate.resize() after set and reset your scrolling variable to calculate correct ion-content height.

Greets, and have fun.

1 Like