How to hide the header and tabs on scroll

I have an header bar and then tab bar as sub header and the tab bar as footer I want to hide the header bar and tab bars on scroll, so please help me how can I do this.

@mhartington please any solution to my problem.

I would try something like that:
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:$ionicScrollDelegate/

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

Greets, and have fun.

1 Like

@bengtler Can you create codepen for this?

1 Like

Please try it on your own first (building codepen and so on).

You want to learn something and i do not want to post only solutions for you

Try it… if it fails, i will help you again :wink:


@bengtler Here is the codepen

It has a problem please see this.

1 Like

Every stuff triggered by events (native javascript events) like scrolling, jumps out of the angularjs - so angularjs does not recognized your scope changes.
With $scope.$timeout, $scope.$apply you are able to say angular “please update my scopes” manually.

but i recognized a problem.
In ion-scroll you have not a on-scroll-complete functionality to show your pane again. :frowning:

Maybe you have to consider, to put your title “contacts” in the headerbar and add your on-scroll stuff directly on the ion-content?


ps: @mhartington The ion-scroll has no on-scroll-complete, but the ion-content has? why ? ^^

1 Like

@bengtler thanks it works on ion-content

Hey guys, sorry for not getting to this, time difference and all (was night by the time it was posted)

@bengtler, not too sure why ion-content only has these attribute. I’ll bring it up to the devs and see why. Good job with the demo!

A nice addition could be to use some animation when the header/footer are hidden.,{
  transition: 0.09s all linear !important;
  height: 0px !important;
1 Like

@mhartington Thank you for your response.

I have a problem that I want to hide header/footer on scrolling but show back when user scroll back to top of the scroll-able content rather than on-scroll-complete.Here is the codepen .And I have header then tabs tabs-top and footer . I want to hide the header and footer on scrolling and move tabbar to top till header hides.

You can definitely make it so the tabs are on top when the header and footer are hidden.
Make use of ng-class for this.

As for making it show only when you scroll up, take a look at our shrinking header demo.

This should get you in the right direction.


@asad @mhartington please have a eye at my issue How to fade Header, Top tabs and footer tabs on scroll

This technique applies for only ion-header-bar!!
How to apply for ion-tabs?? @bengtler @mhartington

Thanks in advance!!

Is it possible set it to a div inside the ion-content Or only for header/footer?

There is an option to set button or other object inside the icon-content to be always over the page content (like a popover but that is alweys display)

What I try to do is to add a button that will always be over the ion-content (like popover) and that will be hide/show on scroll (when scroll up it show and when scroll down it hides).

Anyone can help with how can I do it please?