title: Change styled-component styling based on window.pageYOffset
body: <p>So I have component that I would like to change the styling of based on the <code>window.pageYOffset</code> value. When the user scrolls down X value, I would like to change the background color, although this should not be limited to just the background color as I may also want to change other properties, such as the <code>font-size</code>, <code>color</code>, <code>padding</code> and so forth.</p>
  
  <p>Here's what I currently have.</p>
  
  <pre><code>const AppHeader: React.FC = () =&gt; {
    const [scrollY, setScrollY] = React.useState('')
  
    function handleScroll() {
      if (window.pageYOffset &gt; 1) {
        // Be able to change styling properties based on true / false.
      }
    }
  
    React.useEffect(() =&gt; {
      window.addEventListener('scroll', handleScroll)
      return () =&gt; {
        window.removeEventListener('scroll', handleScroll)
      }
    }, [])
  
    return (
      &lt;Header&gt;
        &lt;h1&gt;Header!&lt;/h1&gt;
      &lt;/Header&gt;
    )
  }
  
  const Header = styled.header`
    // Somehow change the backgound color if window.pageYOffset is greater than value.
    background: ${({color}) =&gt; color ? "red" : "blue"};
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
  `
  </code></pre>
  
  <p>Here's a <a href="https://codesandbox.io/s/priceless-margulis-pru9o?file=/src/App.tsx:95-690" rel="nofollow noreferrer">CodeSandBox</a>, forks are appretiated! :)</p>