如何在滚动时隐藏颤动中的顶部appbar

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [isAppBarVisible, setAppBarVisible] = useState(true);

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const handleScroll = () => {
    const threshold = 100; // 设定的阈值
    const currentScrollPos = window.pageYOffset;

    if (currentScrollPos > threshold) {
      setAppBarVisible(false);
    } else {
      setAppBarVisible(true);
    }
  };

  return (
    <div className="App">
      {isAppBarVisible && <AppBar />}
      <Content />
    </div>
  );
}

function AppBar() {
  return (
    <header className="appbar">
      {/* appbar的内容 */}
    </header>
  );
}

function Content() {
  return (
    <div className="content">
      {/* 页面内容 */}
    </div>
  );
}

export default App;