How to define a sticky ion-segment

Ionic Framework ionic-v3
1

I am having a ion-content which contains three sections according to the following structure. I am using ionic 4.

<ion-header>
    ...... content header ......
<ion-header>

<ion-content>
    <ion-card>
        ...... content A ......
    </ion-card>
    <ion-segment>
        ...... content B ......
    </ion-segment >
    <ion-grid>
        ...... content C ......
    </ion-grid>
</ion-content>

The content can scroll and what I want to do is when I am scrolling the content and when ion-segment comes in the top I want to stick it with header. That means I want to keep scroll the ion-grid and keep ion-segment at the top.

Is there a standard way to do this? Highly appreciate anyone helping me on this.

Thank you.

1 Like
2

I found a interesting solution for my own question by adding everything inside a ion-list in the following way with a ion-item-divider to make a sticky header. There need to do some additional styles and any suggestions?

<ion-item-divider color="light" sticky>
    <ion-segment>... content B ...</ion-segment>
</ion-item-divider>
4 Likes
3

Wonderful!
Thanks for the tip, it helped a lot!