如果窗口滚动到顶部，如何更改 styled.div 的背景？

如何解决如果窗口滚动到顶部，如何更改 styled.div 的背景？

如果窗口滚动到顶部，我想更改 div 的背景。我已经想出了如何在 React 中确定它，并且当 console.logging 我的 isAtTop 变量时，它会根据滚动而改变，但是实际的 div 似乎永远不会收到，因为 styled.div 不会改变颜色。我做了一个codePen：https://codesandbox.io/s/xenodochial-chebyshev-4poi3?file=/src/App.js

import "./styles.css";

import React from 'react'

import styled from 'styled-components'

export default function App() {
  let isAtTop = true;
  let bg = `linear-gradient(to right,#797cd2,#393e9e)`;

  function handleScroll() {
    isAtTop = window.scrollY === 0;

    isAtTop
      ? (bg = `linear-gradient(to right,#393e9e)`)
      : (bg = "white");
    console.log({ isAtTop });
  }

  React.useEffect(() => {
    console.log("UseEffect Run");
    window.addEventListener("scroll",handleScroll);
    return () => window.removeEventListener("scroll",handleScroll);
  });

  const ColorChangeDiv = styled.div`
  background: ${bg};
  position: sticky;
  width: 100%;
  top: 0;
  height: 100px;
  `

  return (
    <>
    <ColorChangeDiv>
    {isAtTop.toString()} ? Hello my background should be {bg}
    </ColorChangeDiv>
    <div style={{height: '500rem'}}></div>
    </>
  );
}