滚动时导航栏元素保持激活状态

Question

我希望在页面滚动时使我的导航栏处于活动状态。如何使用Bootstrap实现这一点？ 我尝试使用React-scroll npm包...但无法有效地完成它。

import React from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from 'react-bootstrap/Nav';
import Logo from "../../assects/img/Nav/vimal.png"
import "./mynavbar.css";

const MyNavbar=()=>{
    return(
        <div>
            <Navbar fixed='top' collapseOnSelect expand="md" bg="dark" variant="dark">
                <Navbar.Brand href="#home">
                    <img className='logo' src={Logo} alt="logo"/>
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                <Nav className="ml-auto">
                    <Nav.Link href="#home">Home</Nav.Link>
                    <Nav.Link href="#about">About</Nav.Link>
                    <Nav.Link href="#skills">Skills</Nav.Link>
                    <Nav.Link href="#projects">Projects</Nav.Link>
                    <Nav.Link href="#contact">Contact</Nav.Link>
                </Nav>
                </Navbar.Collapse>
            </Navbar>
        </div>
    )
}
export default MyNavbar

- user13884914

---

“active” 是什么意思？ - codemonkey

当我滚动导航栏部分时，特定的部分应该在导航栏中突出显示，并且随着我进一步滚动而相应更改。 - user13884914

Answer 1

*JQuery选项

一个好的方法是使用JQuery scroll()函数。 例如：

$(window).scroll(function() {
    var winHeight = $(this).height();
    var scrollTop = $(this).scrollTop();
    
    var elemHeight = $("#first-section").height();
    var elementTop = $("#first-section").position().top; 
     
    if (elementTop < scrollTop + winHeight && scrollTop < elementTop + elemHeight)
        $("your-div").addclass("active");
    else
        $("your-div").removeClass("active");
    
});

这将在窗口顶部达到一定位置时，向您的元素添加一个名为.active{}的类。

- Seb Blackley