Now compatible with Ionic 4 π.
Change header background opacity on content scroll.
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 the IonHeaderScrollOpacityModule into the your page module
import { IonHeaderScrollOpacityModule } from "ion-header-scroll-opacity"; @NgModule({ [...] imports: [IonHeaderScrollOpacityModule], [...] }) export class HomePageModule {}
Put the header-scroll-opacity directive on the ion-header element.
| 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 |
<ion-header scrollOpacity [ionContentRef]="mycontent"> <ion-toolbar color="primary"> <ion-title> Do scroll </ion-title> </ion-toolbar> </ion-header> <ion-content #mycontent [scrollEvents]="true"> ...long scrolling content... </ion-content>
Remember to set [scrollEvents]="true" on the ion-content component otherwise the directive will not work.
Add the fullscreen attribute to the ion-content element and add some css style to make a good effect
.scroll-content { padding-top: 0px !important; }
Any pull-request and issues are wellcome