[Bug] changeOnScroll about ct-material-kit-pro-react

[eleventhaus]

Figured it out

Landing.jsx

function Landing() {
  const [transparent, setTransparent] = useState(true);

  useEffect(() => {
    window.addEventListener("scroll", navbarColorChange);
    return function cleanup() {
      window.removeEventListener("scroll", navbarColorChange);
    };
  });

  const navbarColorChange = () => {
    const windowsScrollTop = window.pageYOffset;
    if (windowsScrollTop > 100) {
      setTransparent(false);
    } else {
      setTransparent(true);
    }
  };

  return (
    <>
      <MKBox sx={{ position: "sticky", top: 0, zIndex: 10 }}>
        <Navbar
          routes={routes}
          action={{
            type: "external",
            route: "/signup",
            label: "sign up",
            color: "warning",
          }}
          sticky
          transparent={transparent}
        />
      </MKBox>

Navbar.jsx

function Navbar({ brand, routes, transparent, light, action, sticky, relative, center }) {
  return (
      <>
        <MKBox
          py={{ xs: 1, sm: 2 }}
          px={{ xs: 4, sm: transparent ? 3 : 3, lg: transparent ? 6 : 6 }}
          my={relative ? 0 : 2}
          mx={relative ? 0 : 3}
          width={relative ? "100%" : "calc(100% - 48px)"}
          borderRadius="xl"
          shadow={transparent ? "none" : "md"}
          color={light ? "white" : "dark"}
          position={relative ? "relative" : "absolute"}
          left={0}
          zIndex={3}
          sx={({ palette: { transparent: transparentColor, white }, functions: { rgba } }) => ({
            backgroundColor: transparent ? transparentColor.main : rgba(white.main, 0.8),
            backdropFilter: transparent ? "none" : `saturate(200%) blur(6px)`,
          })}
        >
        </MKBox>
    </>
  );
}