程序笔记

js使用scroll事件实现锚点滚动到页面顶部时导航高亮

2024-11-01 16

在 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 类。

这样就可以实现锚点内容滚动到页面顶部时，自动高亮导航的效果。

更新于：11天前

赞一波！

文章评论

评论问答

雷达智富

雷达智富

程序笔记

js使用scroll事件实现锚点滚动到页面顶部时导航高亮

相关文章

文章评论