Trying to make ion-segment stick/stay on top

Ionic Framework
1

Using latest Ionic/Angular, trying to make the segment stick up on the top when I have content below it that scrolls. I found online to use the slot=“fixed” parameter but then the ion-segment-button is transparent even though it stays on top. Is there an alternative to the slot fixed option that I could use? I’m guessing custom CSS but I have other segments that I wouldn’t want to change as their behaviour is fine as it is. Thanks!

Screenshot 2023-02-07 195158

<ion-content [fullscreen]="true" [scrollEvents]="true">
  <ion-segment (ionChange)="segmentChanged($event)" value="dashboard" slot="fixed" color="primary">
    <ion-segment-button value="dashboard">
      <ion-label>Dashboard</ion-label>
    </ion-segment-button>
    <ion-segment-button value="details">
      <ion-label>Details</ion-label>
    </ion-segment-button>
  </ion-segment>
<ion-grid *ngIf="segmentOption">
...
</ion-grid>
<ion-grid *ngIf="!segmentOption">
...
</ion-grid>
</ion-content>
1 Like
2

so the ion-item-divider has a sticky directive available to use, this is my hack for doing this

if you nest the ion-segment within one of these, with sticky="true" you should be able to achieve the results you are describing

2 Likes
3

Great thanks! Going to submit a feature request for this and a bug on the transparent issue

4

Submitted a feature request after searching for the issue/feature and it looks like no one has brought it up before feat: Ability to set ion-segment set to position sticky on vertical scrolling of content · Issue #26768 · ionic-team/ionic-framework · GitHub

5

looks like putting the segment in an additional <ion-toolbar> works as described in the issue ticket above

1 Like
6

Ah yes that makes sense