title: Add Scroll EventListener to Document in GatsbyJS (ReactJS)
body: <p>How should I add the following eventlistener to a GatsbyJS (ReactJS) functional component?</p>
  
  <p><strong>EventListener</strong></p>
  
  <pre><code>document.addEventListener('scroll', _ =&gt; document.getElementById('logo').style.setProperty('--v-adjust', window.scrollY + 'px'))
  </code></pre>
  
  <p><strong>Functional Component</strong></p>
  
  <pre><code>import React from 'react'
  import { Link, useStaticQuery, graphql } from 'gatsby'
  
  export default () =&gt; {
      //graphql statement
      return (
          &lt;&gt;...&lt;/&gt;
      )
  }
  </code></pre>