Stick list headers

Is it possible to make list headers sticky when scrolling in Ionic 2, like in default (iOS) apps?

Define the list divider with a sticky attribute like so:

    <ion-item-divider sticky>A</ion-item-divider>

This uses position: sticky CSS which is supported in Safari and Firefox only. Chrome will land this in version 56.


Is there a way to achieve this now whilst we wait for the new CSS sticky attribute to be supported across the board?

@Daveshirman Hi Dave, were you able to achieve this in some way ? Thanks !

No, I gave up trying to do this when I discovered the sticky css attribute was browser dependent. Until that’s not an issue, I’m not giving this any more time. There are far more important things to work on!

How about you?

1 Like

No solution yet for me. I didn’t look much. but I’m same as you, I have higher priorities to work on. I will wait a bit I guess…

1 Like

hi , the sticky attribute is not working for me, It works fine on chrome , but on device , the animation doesn’t work, any suggestions, thanx

We used this feature in one of our projects. Created a small directive out of it: Might be helpful.