navbar transparent when scrolling down

I have an issue with my navbar. When scrolling down, I want it to be solid and visible at all times, but it is transparent.

Here is my navbar => Here is what happens when I scroll down =>

It should be solid white.

Here is my code for the navbar component

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 = (
    <Drawer anchor="left" open={isOpen} onClose={() => setIsOpen(false)}>
      <div style={sidebarStyle} ref={sidebarRef}>
        <div className="sidebar-content flex flex-row justify-center pt-4 pl-56 ">
          <GrClose onClick={toggleSidebar} className="close-button text-xl"></GrClose>
        </div>
        <ul className="flex flex-col pt-4 pl-4">
          <div className="flex items-center" id="list-item">
            <MdOutlineDarkMode className="text-xl"/>
            <h1 className="pl-1">Dark mode</h1>
            <Switch />
          </div>
          <div className="flex items-center" id="list-item">
            
          </div>
        </ul>
      </div>
    </Drawer>
  );

  return (
    <navbar className="bg-white sticky top-0" style={{ backgroundColor: '#fff' }}>
      {drawer}
      <div className="flex custom-padding padding-left space-x-1 items-center">
        <div className="sidebar-button-container">
          <FaBars className="sidebar-button text-xl" onClick={toggleSidebar} />
        </div>
        <h1 className="font-bold text-xl">LIVESCORE</h1>
        <span id="football-emoji">⚽</span>
      </div>
      <div className="navbar-line mt-3">
      </div>
    </navbar>
  );
}

export default Navbar;

What I have tried I tried changing the background color to white like this => <navbar className="sticky top-0" style={{ backgroundColor: '#fff' }}> and like this => <navbar className="bg-white sticky top-0">

I even tried in my standard css file even though I am using tailwind.

Any help is much appreciated:)

I had a similar problem, and the problem was in position: sticky, it looks like you're using tailwindCSS. I see class sticky in navbar. Try to change styles on position fixed, and add z-index. I hope this helps.