How to hide the header and tabs on scroll


#1

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.


#2

@mhartington please any solution to my problem.


#3

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.


#4

@bengtler Can you create codepen for this?


#5

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:


#6

@bengtler Here is the codepen http://codepen.io/asadfida/pen/GJcpm

It has a problem please see this.


#7


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?

greets

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


No on-scroll-complete for ion-scroll?
#8

@bengtler thanks it works on ion-content http://codepen.io/asadfida/pen/GJcpm


#9

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.

.bar.bar-header,
.bar.bar-footer{
  transition: 0.09s all linear !important;
}

.bar.bar-header.ng-hide,
.bar.bar-footer.ng-hide{
  height: 0px !important;
}

#10

@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 http://codepen.io/asadfida/pen/igHpr .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.


#11

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.


How to fade Header, Top tabs and footer tabs on scroll
#12

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


#13

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

Thanks in advance!!


#14

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?