Scroll content that sticks to top

Ionic Framework
1

I’m trying to replicate this layout seen in the substack ios app, where the buttons relevant to the selected page scroll with the content but stick to the top of the content viewport beneath the navigation bar. Please see this video that demos the functionality I’m talking about - note how the “Latest”, “Chat”, “About” and “People” button bar is sticky to the top of the scroll area.

Am I missing some simple way to do this in ionic, or will I need to home bake some sort of solution? I’m using vue but i don’t think that should be relevant. (I actually already implemented a custom solution for the browser so it shouldn’t be terribly difficult to adapt to ionic, but was hoping the framework would have a built in method of achieving this).

2

i didnt realise that position: fixed doesn’t work in ionic, that makes my home baked solution not workable. if anyone has any suggestions i would very much appreciate it. thanks!

3

There are several work around’s but I found using the ion-item-divider tag with the property sticky=true works great.

4

wow thank you for the suggestion! it does indeed work, however it shrinks down the content to be much smaller than I’d like.

Its curious to me that simply setting the position to sticky doesn’t work for any child elements of the list, considering it appears that under the hood all the ion-item-divider is doing is using position: sticky…

anyhow thank you again for your suggestion.

1 Like
5

ok further update: using something akin to this markup:

<ion-list>
  <img src="..." />
  <div class="button-container">
    <ion-button>Thing</ion-button>
    <ion-button>Dong</ion-button>
    <ion-button>Ding</ion-button>
    <ion-button>Dang</ion-button>
  </div>
  <ion-item v-for="chat, i in chats" :key="chat.id" :button="true" @click="itemClick(i)">
    ...
  </ion-item>
</ion-list>

with the following styling (where the first 3 properties are the important ones, the rest are just relevant specifically to my design):

.button-container {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100vw;
  display: flex;
  overflow-y: auto;
}

actually appears to succesfully replicate the behaviour from the substack app. i had tried using position: sticky before and it didn’t work, i’m not sure if it was because i was wrapping my buttons in an ion-item rather than div, but this does in fact seem to respect the position property.