How to make IonHeader disappear on scroll down

Ionic Framework Ionic React
1

Hey guys, i want to make the IonHeader disappear on scroll down and appear on scroll up in React. I saw so many stuff in Angular but I have not seen an example using React. Can you please give me a tip?
Thanks!

2

In principle, I think you need to enable the scroll event on ion-content

You could try something like this

const [headerVisible, setHeaderVisible] = useState(true); 

function Header() {
  if(headerVisible) {
      return <IonHeader> </IonHeader>
  }
 return;
}

<Header />

<IonContent
    scrollEvents={true}
    onIonScrollStart={() => { setHeaderVisible(false)}}
    onIonScroll={() => {}}
    onIonScrollEnd={() => {setHeaderVisible(true)}}>
      <h1>Main Content</h1>

      <div slot="fixed">
        <h1>Fixed Content</h1>
      </div>
  </IonContent>