Skip to content
A directive for Ionic framework for creating affix headers.
TypeScript
Branch: master
Clone or download
Latest commit da05a13 Oct 29, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo/www
src Update for RxJS 6 Oct 23, 2018
.editorconfig Release 1.0.0 Jun 17, 2017
.gitignore Release 1.0.0 Jun 17, 2017
.npmignore
LICENSE
README.md ion-scroll description added Nov 26, 2017
package-lock.json Update for RxJS 6 Oct 23, 2018
package.json
tsconfig.json

README.md

npm npm npm npm

ion-affix

Allows for creating affixed (sticky) ion-list-header, ion-item-divider and ion-card for newest Ionic framework.

Kudos to Collin Donahue-Oponski and his initial idea shown in this gist.

See it

Here, the source can be found at https://github.com/jonaszuberbuehler/ion-affix-demo.

Get it

from npm

npm install --save ion-affix

Use it

Import IonAffixModule in your app.module.ts

@NgModule({
    ...
    imports: [
        IonAffixModule
    ]
    ...
})
export class AppModule {
}

and add the directive ion-affix to any ion-list-header, ion-item-divider or ion-item (inside ion-card) that should be sticky. You also need to provide a reference to the parent ion-content.

<ion-content padding #content>
   <ion-list>
       <ion-list-header ion-affix [content]="content" (click)="test()">Group 1</ion-list-header>
       <ion-item *ngFor="let item of items">{{item}}</ion-item>
   </ion-list>
   <ion-list>
       <ion-list-header ion-affix [content]="content">Group 2</ion-list-header>
       <ion-item *ngFor="let item of items">{{item}}</ion-item>
   </ion-list>
</ion-content>
<ion-content padding #content>
   <ion-item-group>
       <ion-item-divider ion-affix [content]="content" (click)="test()">Group 1 (click me!)</ion-item-divider>
       <ion-item *ngFor="let item of items">{{item}}</ion-item>
   </ion-item-group>
   <ion-item-group>
       <ion-item-divider ion-affix [content]="content">Group 2</ion-item-divider>
       <ion-item *ngFor="let item of items">{{item}}</ion-item>
   </ion-item-group>
</ion-content>
<ion-content padding #content>
    <ion-card>
        <ion-item ion-affix [content]="content" no-lines>
            <ion-avatar item-start>
                <img src="assets/img/marty-avatar.png">
            </ion-avatar>
            <h2>Marty McFly</h2>
            <p>November 5, 1955</p>
        </ion-item>
        <img src="assets/img/advance-card-bttf.png">
        <ion-card-content>
            <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
        </ion-card-content>
        <ion-row>
            <ion-col>
                <button ion-button color="primary" clear small icon-start>
                    <ion-icon name='thumbs-up'></ion-icon>
                    12 Likes
                </button>
            </ion-col>
            <ion-col>
                <button ion-button color="primary" clear small icon-start>
                    <ion-icon name='text'></ion-icon>
                    4 Comments
                </button>
            </ion-col>
            <ion-col align-self-center text-center>
                <ion-note>
                    11h ago
                </ion-note>
            </ion-col>
        </ion-row>
    </ion-card>
</ion-content>

ion-scroll

If you need sticky headers within an ion-scroll make sure you're using a version of this module >=1.1.0 and pass the reference of it instead of ion-content. You most likely also want to add style="overflow:hidden" to the ion-scroll, otherwise the pushing up/pulling down of headers looks a bit strange.

Events

In case you need to know whether a certain element gets sticky or not you can subscribe to onSticky(IonAffixEvent) event:

<ion-content padding #content>
   <ion-list>
       <ion-list-header ion-affix [content]="content" (onSticky)="handleOnSticky($event)">Group 1</ion-list-header>
       <ion-item *ngFor="let item of items">{{item}}</ion-item>
   </ion-list>
   <ion-list>
       <ion-list-header ion-affix [content]="content">Group 2</ion-list-header>
       <ion-item *ngFor="let item of items">{{item}}</ion-item>
   </ion-list>
</ion-content>

IonAffixEvent has two properties:

sticky

(boolean) Whether the affix is sticky or not.

affix

(IonAffix) The affected element (in case you need to manipulate it).

Explain it

To be able use custom Angular directives on a sticky header I decided to make the original ion-list-header element sticky instead of its clone. This is the major difference to the gist shown above and I did it mainly because I have no idea how to do a $compile(clone) known from AngularJS with Angular 2.

Note it

To make it work on iOS use the cordova-plugin-wkwebview-engine plugin. Otherwise the scroll events are only fired once scrolling stops.

You can’t perform that action at this time.