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-content> <ion-item-group> <ion-item-divider sticky>A</ion-item-divider> <ion-item>Angola</ion-item> <ion-item>Argentina</ion-item> </ion-item-group> </ion-content>
position: sticky CSS which is supported in Safari and Firefox only. Chrome will land this in version 56. https://www.chromestatus.com/feature/6190250464378880
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?
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…
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: https://github.com/jonaszuberbuehler/ion-affix. Might be helpful.