title: Update style on scroll event in React
body: <p>I am attempting to change the color style of my header when a user scrolls the page, however, my <code>onScroll</code> method doesn't even seem to be firing. Can someone please tell me why and how I can fix this? The <code>onScroll</code> method is being called on the bottom <code>TemplateWrapper</code> component. Also, if you have any other suggestions on how to do it differently, I'm all ears! Thanks!</p>
  
  <pre><code>const headerStyle = {
        background: 'grey',
        marginBottom: '1.45rem',
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        zIndex: '99'
  }
  
  const modHeader = () =&gt; {
    headerStyle.background = 'white'
    console.log('scroll')
  }
  
  const Header = () =&gt; (
  
    &lt;div className='header'
      style={headerStyle}
    &gt;
      &lt;div
        style={{
          margin: '0 auto',
          maxWidth: 1160,
          padding: '1.45rem 1.0875rem',
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-between'
        }}
      &gt;
        &lt;h1 style={{ margin: 0 }}&gt;
          &lt;Link
              to="/"
              style={{
                color: 'white',
                textDecoration: 'none',
              }}
            &gt;
              Gatsby
          &lt;/Link&gt;
        &lt;/h1&gt;
        &lt;h2 style={{ margin: 0 }}&gt;  
          &lt;Link
            to="/about"
            style={{
              color: 'white',
              textDecoration: 'none',
            }}
          &gt;
            About
          &lt;/Link&gt;
        &lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
  
  const TemplateWrapper = ({
    children
  }) =&gt; (
      &lt;div onScroll={modHeader}&gt;
        &lt;Helmet
          title="Gatsby Default Starter"
          meta={[
            { name: 'description', content: 'Sample' },
            { name: 'keywords', content: 'sample, something' },
          ]}
        /&gt;
        &lt;Header /&gt;
        &lt;div 
          style={{
            margin: '0 auto',
            maxWidth: 960,
            padding: '0px 1.0875rem 1.45rem',
            paddingTop: 0,
          }}
        &gt;
          {children()}
        &lt;/div&gt;
      &lt;/div&gt;
    )
  
  export default TemplateWrapper
  </code></pre>