How to make IonHeader disappear on scroll down

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?

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>

<Header />

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

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