title: Sticky Header and Footer using React
body: <p>I have site built with REACT and I want the Header to stay at the top.
  I have a header.js file and then my css.
  I attached a js file with a function but not sure how to include it in the JSX</p>
  <pre><code>header.js
  
  export default class Header extends Component {
    render() {
      return (
        &lt;React.Fragment&gt;
          &lt;header className={sticky ? &quot;home sticky&quot; : &quot;home&quot;} id=&quot;home&quot;&gt;
            &lt;nav className=&quot;nav&quot;&gt;
              &lt;ul id=&quot;nav&quot; className=&quot;nav&quot;&gt;
                &lt;li className=&quot;current&quot;&gt;
                  &lt;a className=&quot;home&quot; href=&quot;#home&quot;&gt;
                    Home
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a className=&quot;about&quot; href=&quot;#about&quot;&gt;
                    About
                  &lt;/a&gt;
                &lt;/li&gt;
           &lt;/nav&gt;
      &lt;/header&gt;
    &lt;/React.Fragment
  );
  };
  }
  </code></pre>
  <pre><code>index.css
  
  header {
    display: contents;
  }
  
  .sticky {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
  }
  
  header nav {
    background-color: #a1793a;
    display: grid;
  }
  </code></pre>
  <pre><code>useSticky.js
  import { useEffect, useState, useRef } from 'react';
  
  function useSticky() {
    const [isSticky, setSticky] = useState(false)
    const element = useRef(null)
  
    const handleScroll = () =&gt; {
      window.scrollY &gt; element.current.getBoundingClientRect().bottom
        ? setSticky(true)
        : setSticky(false)
    }
  
    // This function handle the scroll performance issue
    const debounce = (func, wait = 20, immediate = true) =&gt; {
      let timeOut
      return () =&gt; {
        let context = this,
          args = arguments
        const later = () =&gt; {
          timeOut = null
          if (!immediate) func.apply(context, args)
        }
        const callNow = immediate &amp;&amp; !timeOut
        clearTimeout(timeOut)
        timeOut = setTimeout(later, wait)
        if (callNow) func.apply(context, args)
      }
    }
  
    useEffect(() =&gt; {
      window.addEventListener(&quot;scroll&quot;, debounce(handleScroll))
      return () =&gt; {
        window.removeEventListener(&quot;scroll&quot;, () =&gt; handleScroll)
      }
    }, [debounce, handleScroll])
  
    return { isSticky, element }
  }
  
  export default useSticky;
  </code></pre>
  <p>I have a sticky function but it's not registering in the site nor via css.</p>
  <p>The Header is not staying at the top, not sure what I'm doing wrong.</p>