Inspired by Collin Donahue-Oponski initial idea shown in this gist and the fact that there was no implementation available for the current Ionic framework to make certain list headers sticky, I gave it a shot and created the small directive ion-affix.
Once installed via
npm install --save ion-affix
it has to be included in your app.module.ts
:To make any
ion-list-header
, ion-item-divider
or ion-item
(within ion-card
) sticky you simply apply the ion-affix
directive to it and pass a reference to the parent ion-content
to it:Demo:
Do you ever think of about the credit card which you get many offers to your profile
ReplyDeletecapitol one.com
Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging
ReplyDeleteionic training in chennai
Very nice, thank you !
ReplyDeleteI saw you just update it for RxJS 6, but it is still for ionic 3.9.x.
Do you plan to adapt it for ionic 4 beta ?