React Js Show or Hide Navbar on Scroll

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Your App</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState, useEffect } = React;

function App() {
      const [isNavbarVisible, setNavbarVisible] = useState(false);

useEffect(() => {
        window.addEventListener('scroll', handleScroll);

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

return (
        <div className='container'>
          <nav className={isNavbarVisible ? 'navbar visible' : 'navbar'}>
            <div className="logo">Logo</div>
            <ul className="nav-links">
              <li>Home</li>
              <li>About</li>
              <li>Contact</li>
            </ul>
          </nav>
          <div className="content" style={{ height: '1000px' }}>
            <h1>React js Show Hide Navbar on Scroll</h1>
            <h3>Welcome to Font Awesome Icons</h3>
            <p>Scroll down to see the navbar in action.</p>
          </div>
        </div>
      );
    }

ReactDOM.render(<App />, document.getElementById('app'));
  </script>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

.container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }

.navbar {
      background-color: #333;
      color: #fff;
      height: 50px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      z-index: 1000;
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
      transition: transform 0.5s;
      transform: translateY(-100%);
      /* Initially hidden */
    }

.navbar.visible {
      transform: translateY(0);
      /* Visible when scrolling down */
    }

.logo {
      font-size: 24px;
    }

.nav-links {
      list-style-type: none;
      padding: 0;
      display: flex;
      gap: 20px;
    }

.nav-links li {
      cursor: pointer;
    }
  </style>
</body>

</html>

 
<!DOCTYPE html>
<html>
​
<head>
  <meta charset="UTF-8" />
  <title>Your App</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState, useEffect } = React;
​
    function App() {
      const [isNavbarVisible, setNavbarVisible] = useState(false);
​
      const handleScroll = () => {
        const scrollTop = window.pageYOffset;
        if (scrollTop > 100) {
          setNavbarVisible(true);
        } else {
          setNavbarVisible(false);
        }
      };
​
      useEffect(() => {
        window.addEventListener('scroll', handleScroll);
​
        return () => {
          window.removeEventListener('scroll', handleScroll);
        };
      }, []);
​
      return (
        <div className='container'>
          <nav className={isNavbarVisible ? 'navbar visible' : 'navbar'}>
            <div className="logo">Logo</div>
            <ul className="nav-links">
              <li>Home</li>
              <li>About</li>
              <li>Contact</li>
            </ul>
          </nav>
          <div className="content" style={{ height: '1000px' }}>
            <h1>React js Show Hide Navbar on Scroll</h1>
            <h3>Welcome to Font Awesome Icons</h3>
            <p>Scroll down to see the navbar in action.</p>
          </div>
        </div>
      );
    }
​
    ReactDOM.render(<App />, document.getElementById('app'));
  </script>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
​
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }
​
    .navbar {
      background-color: #333;
      color: #fff;
      height: 50px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      z-index: 1000;
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
      transition: transform 0.5s;
      transform: translateY(-100%);
      /* Initially hidden */
    }
​
    .navbar.visible {
      transform: translateY(0);
      /* Visible when scrolling down */
    }
​
    .logo {
      font-size: 24px;
    }
​
    .nav-links {
      list-style-type: none;
      padding: 0;
      display: flex;
      gap: 20px;
    }
​
    .nav-links li {
      cursor: pointer;
    }
  </style>
</body>
​
</html>