Ionic change header transparency when scrolling

1

I want to change the color/transparency when some scrolls up and down
on ionic content.

is this any way possible

2

any one tried this before ?

3

Totally possible,

4

Yes thats what i am looking for

how do you start with header opacity as 0
and then when you scroll it appears

5

can you please help me with this

the code you gave me works fine when scrolling however i want the bar opacity to start at 0 then go to 1 when scrolling

6

You would just do this

header.style.opacity = 1 - fadeAmt;
7

Hi mhartington I found this example very useful.
But I have problem when applying this trick to tab headers, is there anything I need to change to make it working?

8

You may have to mess with the element that you are targeting.

9

Hi @kevinhoo,

I use this way to solve this problem

var header = $document[0].body.querySelector(’.bar-header’);
$rootScope.$on(’$stateChangeStart’, function (event, next, nextParams, fromState) {

       if(next.name=="tab.home"){
            ionic.requestAnimationFrame(function() {
                header.style.opacity = 0;
                $ionicScrollDelegate.scrollTop();
            });
        }else {
            ionic.requestAnimationFrame(function() {
                header.style.opacity = 1;
            });
        }

}

10

@sidfeng, Thanks!! This is working now with some minor tweaks in effects.

11

Hey @mhartington

This works great, I really like it, thank you!

Would you know how to slow down the fade effect though? At present, the header bar appears a little too soon for my needs and I was hoping to allow the user scroll a little further before it appears.

Where would I need to change to allow that happen?

Thanks

Damien

12

Hey working great in web view but in android it is not working, how can i make it work?

13

Hi Mike,
This is totally awesome!
How can I achieve this in Ionic 3?
Regards,
Lola