title: I am making navbar that hides navbar on scrolling over 100px but doesn't work
body: <p>I have this code for making a navbar that hides on scrolling over 100px. but couldn't solve it!!</p>
  <pre><code>function Nav() {
      const [show, handleShow]= useState(false);
          const transitionNavBar = () =&gt; {
          if (window.scrollY &gt; 100){
          handleShow(false);
          } else {
          handleShow(true);
          }
      };
      
         useEffect (() =&gt; {
            window.addEventListener(&quot;scroll&quot;, transitionNavBar)
            return()=&gt;window.removeEventListener(&quot;scroll&quot;, transitionNavBar)
         }, [])
          
          return (
              &lt;div className={&quot;nav ${show &amp;&amp; 'nav_black'}&quot;}&gt;
  </code></pre>
  <p>here 'nav' and 'nav_black' are two classes for navbar. This code {&quot;nav ${show &amp;&amp; 'nav_black'}&quot;} doesn't work.</p>