Ionic 3: Как закрепить заголовок ion-list вверху и прокрутить только элемент списка, а не ion-content?

Question

У меня есть ионный список на странице, и я хочу прокрутить только элемент списка, а не весь ионный контент.

Вот мой код:

<ion-content scroll="false" no-padding>
    <ion-list>
        <ion-list-header>Select your Status</ion-list-header>

        <ion-scroll style="width:100%; height:100vh" scrollY="true">
           <ion-item>
               <h2>Available</h2>
           </ion-item>
           <ion-item>
               <h2>Busy</h2>
           </ion-item>
           <ion-item>
               <h2>At school</h2>
           </ion-item>
           <ion-item>
               <h2>At the movies</h2>
           </ion-item>
           <ion-item>
               <h2>At work</h2>
           </ion-item>
           <ion-item>
               <h2>Battery about to die</h2>
           </ion-item>
           <ion-item>
               <h2>Can't talk, text only</h2>
           </ion-item>
           <ion-item>
               <h2>In a meeting</h2>
           </ion-item>
           <ion-item>
               <h2>At the gym</h2>
           </ion-item>
           <ion-item>
               <h2>Sleeping</h2>
           </ion-item>
           <ion-item>
               <h2>Urgent calls only</h2>
           </ion-item>
       </ion-scroll>
    </ion-list>
</ion-content>

Я хочу исправить заголовок списка "Выберите свой статус" и прокручивать только другие элементы списка, но он скрывает заголовок списка, даже если я установил scroll = "false" для ion-content. Пожалуйста помоги. Заранее спасибо.

Answer 1

Добавление атрибута sticky в тег заголовка списка ионов.

Применимо в ионных 2, ионных 3, ионных 4

Answer 2

Вы можете сделать так:

HTML

<ion-header>
  <ion-list-header>Select your Status</ion-list-header>
</ion-header>

<ion-content scroll="false" no-padding>
  <ion-list>
    <ion-scroll style="width:100%; height:100vh" scrollY="true">
      <ion-item>
        <h2>Available</h2>
      </ion-item>
      ...
    </ion-scroll>
  </ion-list>
</ion-content>

Поместите ваш ion-list-header внутрь ion-header, чтобы сделать его липким

Результат: