如何在 React.js 中更改滚动条上的 Bootstrap 导航栏颜色？

Question

我正在寻找一种方法来更改滚动时的导航栏颜色（CSS 中的 .bg-light），但我找不到方法。我想实现一个代码，以便每当用户从某个 y 点向下滚动时，导航栏样式就会改变；每当用户向上滚动到该点时，它就会回到原来的样式。

这是我的导航栏组件。有什么建议么？

import React, { useState} from 'react';
import './Navbar.css';
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import { Link, animateScroll as scroll } from "react-scroll";

const navbar = (props) =>  {

    return (
        <div>
        <Navbar bg="light" expand="sm" fixed="top">
            <Navbar.Brand href="#home">
                KuGPA
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav ">
                    <Nav.Link className="ml-auto"/>
                    <Link to="HOME" smooth={true} duration= {500}>
                        <Nav.Link  href="#HOME">Home</Nav.Link>
                    </Link>

                    <Link to="KUGPA" smooth={true} duration= {500}>
                    <Nav.Link  href="#KUGPA">KuGPA</Nav.Link>
                    </Link>


                    <Link to="ABOUT" smooth={true} duration= {500}>
                    <Nav.Link href="#ABOUT">About</Nav.Link>
                    </Link>


                    <Link to="CONTACT" smooth={true} duration= {500}>
                    <Nav.Link  href="#CONTACT">Contact</Nav.Link>
                    </Link>
            </Navbar.Collapse>
        </Navbar>
        </div>

    );
  }


export default navbar;

谢谢

Answer 1

我刚刚测试了这个，效果很好。

const [navBackground, setNavBackground] = useState(false)
    const navRef = useRef()
    navRef.current = navBackground
    useEffect(() => {
      const handleScroll = () => {
        const show = window.scrollY > 50
        if (navRef.current !== show) {
          setNavBackground(show)
        }
      }
      document.addEventListener('scroll', handleScroll)
      return () => {
        document.removeEventListener('scroll', handleScroll)
      }
    }, [])

在导航栏中，删除 bg="light"

 <Navbar expand="sm" fixed="top" style={{ transition: '1s ease',backgroundColor: navBackground ? 'black' : 'transparent'}}>