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