Ionic change header transparency when scrolling

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

is this any way possible

any one tried this before ?

Totally possible,

Yes thats what i am looking for

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

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

You would just do this = 1 - fadeAmt;

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?

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

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) {

            ionic.requestAnimationFrame(function() {
       = 0;
        }else {
            ionic.requestAnimationFrame(function() {
       = 1;


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

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?



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

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