title: how to create a fixed/sticky header on scroll with React
body: <p>I was trying to create a fixed/sticky header on the scroll in React.</p>
  
  <p>But I am unable to create this stuff. I am giving a reference to design what I want to do.</p>
  
  <p>(<a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header</a>)
  I want to implement the following in react </p>
  
  <pre><code>window.onscroll = function() {myFunction()};
  
  var header = document.getElementById("myHeader");
  var sticky = header.offsetTop;
  
  function myFunction() {
    if (window.pageYOffset &gt; sticky) {
      header.classList.add("sticky");
    } else {
      header.classList.remove("sticky");
    }
  }
  ```&lt;/script&gt;
  </code></pre>