title: how to Show or hide Navbar when scroll use react.js?
body: <p>I used react.js Hooks with useState and useEffect, when I scroll-down and the screen comes down Header hides after 250 pixels. Now I want to know how to display Header using the react Hooks when I scroll up.</p>
  <pre><code>const Navbar = () =&gt; {
    const [show, setShow] = useState(false)
    const controlNavbar = () =&gt; {
        if (window.scrollY &gt; 250 ) {
            setShow(true)
        }else{
          setShow(false)
        }
    }
  
    useEffect(() =&gt; {
        window.addEventListener('scroll', controlNavbar)
        return () =&gt; {
            window.removeEventListener('scroll', controlNavbar)
        }
    }, [])
  </code></pre>
  <p>and header:</p>
  <pre><code> &lt;header className={`active ${show &amp;&amp; 'hidden'}`}&gt;&lt;/header&gt;
  </code></pre>
  <p>css:</p>
  <pre><code>.active{
      height: 4rem;
      width: 100%;
      position: fixed;
      top: 0px;
      transition: 0.3s linear;
      display: flex;
      justify-content:stretch;
      align-items: center;
      background-color: #FFFFFF;
      border-bottom: 1px solid rgba(0, 0, 0, .1);
      z-index: 40;
      box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .08);
      /* padding: 0 7%; */
  }
  .hidden{
      height: 4rem;
      width: 100%;
      z-index: 40;
      border-bottom: 1px solid rgba(0, 0, 0, .1);
      box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .08);
      position: fixed;
      top: -80px;
      transition: 0.3s linear;
  
  }
  </code></pre>