toriphes / ion-header-scroll-opacity Goto Github PK

View Code? Open in Web Editor NEW

8.0 3.0 4.0 5.46 MB

Change header background opacity on content scroll

License: MIT License

TypeScript 87.00% JavaScript 13.00%

ionic scroll opacity directive

ion-header-scroll-opacity's Introduction

ion-header-scroll-opacity

Now compatible with Ionic 4 🎉.

Change header background opacity on content scroll.

install

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 directive

Import the IonHeaderScrollOpacityModule into the your page module

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

<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

.scroll-content {
  padding-top: 0px !important;
}

Demo

Contribute

Any pull-request and issues are wellcome

ion-header-scroll-opacity's People

Contributors

Stargazers

Watchers

Forkers

ionictemplate faustfizz mvanhelmont fana605

ion-header-scroll-opacity's Issues

Property not known?

Hi, thanks for doing this directive, its exactly what I was looking for!

I did bump into something weird that an hour of Google didn't solve.

Template parse errors:
Can't bind to 'scrollArea' since it isn't a known property of 'ion-header'.

My html:

<ion-header class="home-common" color="sdbredfg"  header-scroll-opacity [scrollArea]="mycontent">
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon class="icon-menu" name="menu" color="sdbredfg"></ion-icon>
        </button>
        <ion-title color="sdbredfg">Preparation</ion-title>
    </ion-navbar>
</ion-header>
<ion-content class="page-guide home-common" no-padding #mycontent fullscreen>

So it seems to be objecting to having added [scrollArea] as a property, which makes sense..

There was another article (https://medium.com/@gregor.srdic/ionic3-hidding-header-on-footer-on-content-scroll-15ab95b05dc5) that in the comments had similar issues.

ps, in your docu you say to use it in the app.module.ts declarations, though that errors, and logically should be as an import...

@input ionContentRef shoud be a valid instance of IonContent

My header is separate module like below.

<ion-header class="ion-no-border" scrollOpacity [ionContentRef]="mycontent"> <ion-toolbar lines="none" [class.item-background-color]="showToolbar"> <div class="logo" slot="start"> <div class="big-text"> <ion-icon src="/assets/logo.svg"></ion-icon> </div> </div> <ion-buttons slot="end" class=" notificatoin_button"> <ion-back-button [text]="Back" [hidden]="!edited" defaultHref="/home"></ion-back-button> <ion-button [routerLink]="['/notifications']"> <ion-icon class="badge" name="notifications-circle-outline"> </ion-icon> <ion-badge class="badge-one" color="light">{{notification_cnt}}</ion-badge> </ion-button> </ion-buttons> </ion-toolbar> </ion-header>

And above header module call in all pages like below.
<app-header></app-header>

Now I am trying to use this it gives below error.

core.js:4197 ERROR Error: Uncaught (in promise): Error: @input ionContentRef shoud be a valid instance of IonContent
Error: @input ionContentRef shoud be a valid instance of IonContent
at IonHeaderScrollOpacityDirective. (header-scroll-opacity.directive.ts:80:13)
at Generator.next ()

header lost opacity when new page/modal pushed in

First of all thanks for the great feature that make the header transparent and opaque when scrolled. However I faced an issue where the transparency was lost when I push a page/modal then dismiss it.

I am seeking help in SO https://stackoverflow.com/q/53811969/1914720 as well.

Please add a @Pipe/@Directive/@Component annotation.

Hi, i follow all steps but when i run "ionic serve" i have this error. Any idea why?
Unexpected module 'IonHeaderScrollOpacityModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@component annotation.