js使用scroll事件实现锚点滚动到页面顶部时导航高亮
2024-11-01
27
在 JavaScript 中,可以通过监听页面滚动事件,并判断页面顶部与各个锚点的距离来实现导航高亮效果。当某个锚点的内容块滚动到页面顶部时,自动高亮相应的导航项。
以下是实现方式:
1. HTML 结构
假设我们有多个内容区块,每个区块都有一个唯一的锚点(id),并在页面顶部有对应的导航链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anchor Navigation Highlight</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<a href="#section1" class="nav-link">Section 1</a>
<a href="#section2" class="nav-link">Section 2</a>
<a href="#section3" class="nav-link">Section 3</a>
<a href="#section4" class="nav-link">Section 4</a>
</div>
<div id="section1" class="section">Content for Section 1</div>
<div id="section2" class="section">Content for Section 2</div>
<div id="section3" class="section">Content for Section 3</div>
<div id="section4" class="section">Content for Section 4</div>
<script src="script.js"></script>
</body>
</html>
2. CSS 样式
定义一个高亮样式,显示当前活动的导航项。
/* styles.css */
body {
font-family: Arial, sans-serif;
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
padding: 10px;
display: flex;
gap: 10px;
}
.navbar a {
color: white;
text-decoration: none;
padding: 5px 10px;
}
.navbar a.active {
background-color: yellow;
color: #333;
}
.section {
padding: 100px 20px;
margin-top: 50px;
height: 600px;
border: 1px solid #ddd;
}
3. JavaScript 实现滚动监听高亮
通过监听 scroll 事件来判断哪个内容区块已经滚动到页面顶部,并将对应的导航链接高亮。
// script.js
document.addEventListener("DOMContentLoaded", function () {
const sections = document.querySelectorAll(".section");
const navLinks = document.querySelectorAll(".navbar .nav-link");
// 页面滚动事件监听
window.addEventListener("scroll", () => {
let currentSectionId = "";
sections.forEach(section => {
// 获取每个 section 到页面顶部的距离
const sectionTop = section.getBoundingClientRect().top;
// 当 section 的顶部接近视口顶部时,认为当前 section 为活动状态
if (sectionTop >= 0 && sectionTop <= 150) {
currentSectionId = section.getAttribute("id");
}
});
// 根据当前活动的 section 高亮对应导航
navLinks.forEach(link => {
if (currentSectionId) {
link.classList.remove("active");
if (link.getAttribute("href") === `#${currentSectionId}`) {
link.classList.add("active");
}
}
});
});
});
代码说明
sections.forEach:遍历页面中的所有内容区块,检查每个区块与视口顶部的距离。
getBoundingClientRect().top:获取区块顶部相对于视口顶部的距离。如果该距离在 0 到 150 之间(可以调整),则视为该区块“到达页面顶部”。
currentSectionId:根据当前区块的 id,更新高亮导航链接。
navLinks.forEach:遍历所有导航链接,移除 active 类,然后为当前活动的链接添加 active 类。
这样就可以实现锚点内容滚动到页面顶部时,自动高亮导航的效果。
更新于:1个月前赞一波!
相关文章
- 【说站】js中every方法怎么用?
- 【说站】js some方法是什么
- 【说站】Js值传递和引用传递的不同
- js使用IntersectionObserver实现锚点在当前页面视口时导读高亮
- 前端js拖拽插件库有哪些?
- Swapy - 开源JavaScript js拖拽插件
- 【说站】一分钟带你快速了解js面向对象是什么?
- JS 的 apply 方法
- JS 字符串和数组相互转换
- JS 数组去重的多种方法
- JS 函数中的 arguments 类数组对象
- 介绍Js简单的递归排列组合
- Node.js 软件包管理工具 (npm)
- JS 性能优化之防抖
- JS 性能优化之节流
- JS 数组方法 every 和 some 的区别
- JS 正则表达式常用方法
- JS 数组详解【编程笔记】
- JS 中的 ?. 和 ??
- 一款轻量级前端框架Avalon.Js
文章评论
评论问答