Stick list headers

Ionic Framework ionic-v3
1

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

2

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>

This uses position: sticky CSS which is supported in Safari and Firefox only. Chrome will land this in version 56. https://www.chromestatus.com/feature/6190250464378880

6 Likes
3

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

4

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

5

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
6

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
7

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

8

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.

5 Likes