Is there a way for me to smoothly transition the background color of my navigation, similar to this example?
Article.js
import React, { useRef, useEffect } from 'react';
import Grid from '@mui/material/Grid';
import { Link as RouterLink } from "react-router-dom";
import Typography from '@mui/material/Typography';
import Breadcrumbs from '@mui/material/Breadcrumbs';
import Link from '@mui/material/Link';
import './Article.css';
export default function Article() {
const [isScrolling, setScrolling] = React.useState(false);
useEffect(() => {
function handleScroll() {
if (window.scrollY < 10) {
setScrolling(false);
} else {
setScrolling(true);
}
}
window.addEventListener("scroll", handleScroll, { passive: true });
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, [isScrolling]);
function CreateBasicBreadcrumbs() {
return (
<div
role="presentation"
className={`pop-up ${isScrolling && 'active'}`}
>
<Breadcrumbs
aria-label="breadcrumb"
sx={{ marginLeft: 2, }}
>
<Link
underline="hover"
color="inherit"
component={RouterLink}
to={'/'}
>
Home
</Link>
<Typography color="text.primary">
Articles
</Typography>
</Breadcrumbs>
</div >
);
}
return (
<Grid
container='true'
direction='row'
width='100%'
sx={{
paddingTop: 5,
backgroundColor: 'rgb(248, 249, 250)'
}}
onScroll={(e) => { console.log('scrolling') }}
>
<Grid
item='true'
xs={12}
sm={12}
md={12}
lg={9}
xl={7}
sx={{
paddingLeft: 5,
height: '2000px',
}}
>
<CreateBasicBreadcrumbs />
</Grid>
</Grid>
);
}
Article.css
.pop-up {
padding-bottom: 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: sticky;
top: 10px;
transition: all 1s linear;
}
.pop-up.active {
background-color: rgb(255, 255, 255);
}
Whenever I run this code, the 'active' class is applied to the [div] element, but the background color changes abruptly from rgb(248, 249, 250) to rgb(255, 255, 255).
I suspect that the addEventListener updates isScrolling with every scroll, causing a re-render of the [div] element and its children. Can you help me identify what might be going wrong here?