导航栏元素在滚动时处于活动状态
Posted
技术标签:
【中文标题】导航栏元素在滚动时处于活动状态【英文标题】:Navbar element active while scrolling 【发布时间】:2021-06-06 01:06:32 【问题描述】:我想在滚动页面时激活导航栏。我怎样才能通过使用引导程序来做到这一点? 我尝试使用 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 />
</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
【问题讨论】:
“活跃”是什么意思? 当我滚动浏览导航栏部分时,特定部分应在导航栏中突出显示,并且在我进一步滚动时它应相应更改 【参考方案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 的类。
【讨论】:
以上是关于导航栏元素在滚动时处于活动状态的主要内容,如果未能解决你的问题,请参考以下文章
更改 Material You 底部导航栏处于活动和非活动状态的图标