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