title: How to animate a div with a position fixed in react js?
body: <p>I have a header component which gets the fixed class after user scrolls down a bit like this :</p>
  <pre><code> const [show, setShow] = React.useState(false);
  
    const handleShow = () =&gt; {
      if (typeof window !== &quot;undefined&quot;) {
        if (window.pageYOffset &gt; 120) {
          if (!show) {
            console.log(&quot;set to true&quot;);
            setShow(true);
          }
        }
        if (window.pageYOffset &lt; 120) {
          console.log(&quot;set to false&quot;);
          setShow(false);
        }
      }
    };
  
    React.useEffect(() =&gt; {
      if (typeof window !== &quot;undefined&quot;) {
        window.addEventListener(&quot;scroll&quot;, handleShow);
      }
      return () =&gt; {
        if (typeof window !== &quot;undefined&quot;) {
          window.removeEventListener(&quot;scroll&quot;, handleShow);
        }
      };
    }, []);
  
  return (
         &lt;div
            className={show ? classes.fixed : &quot;&quot;}
            style={{
              background: bgColor,
              boxShadow: &quot;0 0 10px #ccc&quot;,
            }}
          &gt;
            &lt;div className=&quot;d-flex justify-content-center&quot;&gt;
             &lt;div&gt;Header&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>And the css code for fixed class is :</p>
  <pre><code>.fixed {
    position: fixed;
    transition: all 0.3s;
    z-index: 1000;
    width: 100%;
  }
  </code></pre>
  <p>It gets fixed to the top but the transition doesn't work and I want the header to get fixed at the top with some kind of animation .</p>
  <p>How can I animate with position fixed for a div ?</p>