Панель навигации прозрачна при прокрутке вниз ⇐ CSS

[Anonymous]

У меня проблема с панелью навигации. При прокрутке вниз я хочу, чтобы он всегда был сплошным и видимым, но при этом прозрачным.
Вот моя панель навигации =>

Вот что происходит, когда я прокручиваю вниз =>


Он должен быть сплошным белым.
Вот мой код компонента навигационной панели

Код: Выделить всё

import { useEffect, useRef, useState } from "react";
import { FaBars } from 'react-icons/fa'
import { GrClose } from 'react-icons/gr'
import { Drawer } from "@mui/material";
import Switch from '@mui/material/Switch';
import { MdOutlineDarkMode } from "react-icons/md"
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';

const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);
const sidebarRef = useRef(null) // outside click reference point

const toggleSidebar = (event) => {
event.stopPropagation(); // prevent sidebar from not opening
console.log("opening sidebar")
setIsOpen(!isOpen);
}

const closeSidebar = (event) => {
if (sidebarRef.current && !sidebarRef.current.contains(event.target)) {
setIsOpen(false);
console.log("closing sidebar");
}
}

useEffect(() => {
document.addEventListener("click", closeSidebar);

return () => {
document.removeEventListener("click", closeSidebar)
};
}, []);

const sidebarStyle = {
width: "300px",
height: "100vh",
position: "fixed",
borderRadius: isOpen ? "0 20px 20px 0" : "0",
top: 0,
left: isOpen ? 0 : -300,
backgroundColor: "#f1f5f9",
overflowX: "hidden",
transition: "all 0.3s",
zIndex: 1,
boxShadow: isOpen ? "-10px 0px 10px rgba(0, 0, 0, 0.2)" : "none",
};

const drawer = (
 setIsOpen(false)}>




[list]


Dark mode


[/list]


);

return (

{drawer}




LIVESCORE
⚽



);
}

export default Navbar;

Что я пробовал
Я пробовал изменить цвет фона на белый, вот так =>

Код: Выделить всё

и вот так =>

Код: Выделить всё

Я даже попробовал в своем стандартном файле CSS, хотя использую попутный ветер.
Любая помощь очень ценится:)
Я даже попробовал в своем стандартном файле CSS, хотя использую попутный ветер.
Любая помощь очень ценится:)
п>

Подробнее здесь: https://stackoverflow.com/questions/771 ... lling-down