# ion-header-scroll-opacity

> Change header background opacity on content scroll

Latest version **2.0.1** (published 2019-08-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install ion-header-scroll-opacity
pnpm add ion-header-scroll-opacity
yarn add ion-header-scroll-opacity
bun add ion-header-scroll-opacity
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2019-08-14 |
| First published | 2018-06-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 120.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Giulio Ganci |
| Maintainers | toriphes |
| Keywords | ionic, ionic2, ionic3, header, scroll, opacity, directive |

## Links

- npm: https://www.npmjs.com/package/ion-header-scroll-opacity
- Repository: https://github.com/toriphes/ion-header-scroll-opacity
- Homepage: https://github.com/toriphes/ion-header-scroll-opacity#readme
- Issues: https://github.com/toriphes/ion-header-scroll-opacity/issues
- npm.io page: https://npm.io/package/ion-header-scroll-opacity

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 2.0.1 (latest) — 2019-08-14
- 1.1.0 — 2019-08-13
- 1.0.4 — 2018-12-18
- 1.0.2 — 2018-07-09
- 1.0.0 — 2018-06-13

## README

[![npm](https://img.shields.io/npm/l/ion-header-scroll-opacity.svg)](https://www.npmjs.com/package/ion-header-scroll-opacity/)
[![npm](https://img.shields.io/npm/dt/ion-header-scroll-opacity.svg)](https://www.npmjs.com/package/ion-header-scroll-opacity)
[![npm](https://img.shields.io/npm/dm/ion-header-scroll-opacity.svg)](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
<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.

### 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

![Demo](./ion-header-scroll-opacity.gif "Demo")

## Contribute

Any pull-request and issues are wellcome

---
_Source: https://npm.io/package/ion-header-scroll-opacity · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._