https://github.com/toriphes/ion-header-scroll-opacity
Change header background opacity on content scroll
https://github.com/toriphes/ion-header-scroll-opacity
directive ionic opacity scroll
Last synced: 3 months ago
JSON representation
Change header background opacity on content scroll
- Host: GitHub
- URL: https://github.com/toriphes/ion-header-scroll-opacity
- Owner: toriphes
- License: mit
- Created: 2018-06-13T21:10:00.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T04:28:00.000Z (over 2 years ago)
- Last Synced: 2025-04-23T03:09:35.685Z (3 months ago)
- Topics: directive, ionic, opacity, scroll
- Language: TypeScript
- Size: 5.34 MB
- Stars: 8
- Watchers: 2
- Forks: 4
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/ion-header-scroll-opacity/)
[](https://www.npmjs.com/package/ion-header-scroll-opacity)
[](https://www.npmjs.com/package/ion-header-scroll-opacity)
# ion-header-scroll-opacity
Now compatible with Ionic 4 🎉.
Change header background opacity on content scroll.
## install
```bash
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 ](https://github.com/toriphes/ion-header-scroll-opacity/tree/ionic-3) branch for reference.
## Import directive
Import the `IonHeaderScrollOpacityModule` into the your page module
```typescript
import { IonHeaderScrollOpacityModule } from "ion-header-scroll-opacity";
@NgModule({
[...]
imports: [IonHeaderScrollOpacityModule],
[...]
})
export class HomePageModule {}
```
## 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 |
```html
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
```css
.scroll-content {
padding-top: 0px !important;
}
```
## Demo
## Contribute
Any pull-request and issues are wellcome