javascript - 导航栏元素在滚动时处于活动状态
问题描述
我想让我的导航栏在滚动页面时处于活动状态。我怎样才能通过使用引导程序来做到这一点?我尝试使用 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
解决方案
*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{} 的类。
推荐阅读
- python - 我已经解决了各种问题,但我的情况在 excel 表中有所不同
- sql - 将数据行限制为 2
- powershell - 从 CSV/TXT 创建文件夹并将匹配列移动到 Powershell 或 Batch 中的新目录
- excel - 当清除格式不起作用时,如何重置 Excel 中的最后一行?
- post - SPFX Sharepoint search rest api /_api/search/postquery 响应无法转换为 .json()
- c++ - 在 linux 和 mac 上给出不同结果的简单程序
- google-chrome-devtools - Chrome 分析器中的“函数调用”活动是什么意思?
- c++ - 在覆盖的新(和删除)中查找对象类型
- php - 因为当每个复选框选择多个类别时,数据库中只显示一个
- c# - 是否有工具或策略可以找出项目需要引用的所有 .dll 和 nuget 包?