How to hide a header in ionic/vue3 on Scroll

Issue

I wanted to know how I can hide a header in Ionic with vue3 by scrolling down the page, and re-show it when scrolling up.

i tried every thing i could found on internet but didn't works for me

Solution

You can use Events on ion-content:

for example:

<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>

Documentation

Answered By - Najam Us Saqib