如何在 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'}}>

Answer 2

我正在尋找一種滾動方式更改Navbar顏色（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;

謝謝