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: about 1 month 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 (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-02-28T04:28:00.000Z (almost 2 years ago)
• Last Synced: 2024-11-11T01:49:55.917Z (2 months ago)
• Topics: directive, ionic, opacity, scroll
• Language: TypeScript
• Size: 5.34 MB
• Stars: 8
• Watchers: 3
• Forks: 4
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

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

  

    

      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

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

## Contribute

Any pull-request and issues are wellcome