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

ionic-v1
1

Hi everyone! I am new to Ionic and Angularjs and having an issue please help me to solve it. I have header then tabs-top as subheader then content and tabs at bottom.Here is the codepen demo. http://codepen.io/alinazafar/pen/wiFnd

I want to fade header , sub-header and footer on scroll and all shown back when scroll back to top.
I have seen the same issue like mine How to hide the header and tabs on scroll
but it has some problems that it hides on scroll and as scroll stops bars shown back.

I want to fade header and footer and subheader may also fade or it should move to top.

Thank you for reading my problem.

2

why no one is replying to this post???

3

You could use the solution of the post you mentioned, but remove the part which fade ins the bars again.
Hang on the onscroll event to get scrollposition.
An easy way is to use ionic scroll handling.

http://ionicframework.com/docs/api/directive/ionContent/
You can add a on-scroll-complete attribute to your ion-content.
This could handle a function which gets the scrollposition if scrolling finished -> if position.top = 0 or with a little bit tolerance 30 -> show bars.
To get scroll position you can use this:
http://ionicframework.com/docs/api/service/$ionicScrollDelegate/
getScrollPosition()

Try it and if you does not get along this problem -> make a codepen and someone will help you again.

Greetz.

4

Here is the solution to your problem. http://codepen.io/asadfida/pen/HvDtb

1 Like