Friday, September 15, 2017

ion-affix: Sticky headers for Ionic framework

Fork me on GitHub

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:



  1. Do you ever think of about the credit card which you get many offers to your profile

  2. 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…
    ionic training in chennai

  3. Very nice, thank you !
    I 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 ?