ion-header-scroll-opacity
Now compatible with Ionic 4 🎉.
Change header background opacity on content scroll.
install
npm i ion-header-scroll-opacity --save
If you are using Ionic 3 install ion-header-scroll-opacity@^1.0.0
and use to the ion-header-scroll-opacit#ionic-3 branch for reference.
Import directive
Import the IonHeaderScrollOpacityModule
into the your page module
;
Usage
Put the header-scroll-opacity
directive on the ion-header element.
Directive Input
Input | Description | Default value |
---|---|---|
ionContentRef | ion-content reference |
none |
scrollAmount | Amount of pixel to be scrolled in order end the opacity transition | 88 |
isTransparent | If true the header background starts with opacity=0 | true |
Do scroll ...long scrolling content...
Remember to set [scrollEvents]="true"
on the ion-content component otherwise the directive will not work.
Tip
Add the fullscreen
attribute to the ion-content
element and add some css style to make a good effect
Demo
Contribute
Any pull-request and issues are wellcome