How to hide header when scrolling the content Ionic Vue

Ionic Framework
1

The ionic-header and ionic-toolbar is the red line and the ion-card is the purple line content. What I want is when scrolling down the content and the header will be hidden and scroll up the header will display back

image
image1359×542 35.3 KB 

<ion-header>
        <ion-toolbar>
          <ion-grid>
            <ion-row>
              <ion-col>
                <ion-title size="small" id="titleFont">Welcome, {{memberName}}</ion-title>
              </ion-col>
              <ion-col id="SegmentBg">
                <ion-segment @ionChange="clicked($event)" :scrollable="true" v-model="component">
                <ion-segment-button value="Repurchase" >
                  <ion-img src="./assets/icon/Repurchase.png" alt="Repurchase" title="Repurchase"/>
                  <ion-label id="textSmall">Repurchase</ion-label>
                </ion-segment-button>
                <ion-segment-button value="Registration">
                  <ion-img src="./assets/icon/Registration.png" alt="Registration" title="Registration"/>
                  <ion-label id="textSmall">Registration</ion-label>
                </ion-segment-button>
                <ion-segment-button value="TripPoint">
                  <ion-img src="./assets/icon/Trip-Point.png" alt="Trip Point" title="Trip Point"/>
                  <ion-label id="textSmall">Trip Point</ion-label>
                </ion-segment-button>
                <ion-segment-button value="Voucher">
                  <ion-img src="./assets/icon/Voucher.png" alt="Voucher" title="Voucher"/>
                  <ion-label id="textSmall">Voucher</ion-label>
                </ion-segment-button>
               </ion-segment>
              </ion-col>
            </ion-row>
          </ion-grid>
          
        </ion-toolbar>
      </ion-header>
      
      <ion-card id="Border" >
       <component v-bind:is="component"/>
      </ion-card>
2 
<template>
  <ion-content
    :scroll-events="true"
    @ionScrollStart="logScrollStart()"
    @ionScroll="logScrolling($event)"
    @ionScrollEnd="logScrollEnd()">
      <h1>Main Content</h1>

      <div slot="fixed">
        <h1>Fixed Content</h1>
      </div>
  </ion-content>
</template>

<script>
import { IonContent } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonContent }
});
</script>