ion-affix
Allows for creating affixed (sticky)
ion-list-header
,ion-item-divider
andion-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
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
.
Group 1 {{item}} Group 2 {{item}}
Group 1 (click me!) {{item}} Group 2 {{item}}
Marty McFly November 5, 1955 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. 12 Likes 4 Comments 11h ago
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:
Group 1 {{item}} Group 2 {{item}}
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.