js楼层点亮

基础概念

"楼层点亮"通常是指在网页设计中，通过JavaScript实现页面滚动时，对应楼层的导航链接高亮显示的效果。这种效果可以提升用户体验，让用户清楚地知道当前所处的位置。

类型

固定导航栏：导航栏始终固定在页面顶部。
滚动监听：根据页面滚动的位置动态改变导航链接的高亮状态。

应用场景

长页面网站：如电商网站的产品列表页、企业官网的多页面布局等。
单页应用（SPA）：在单页应用中，楼层点亮可以帮助用户更好地理解页面结构。

示例代码

以下是一个简单的JavaScript实现楼层点亮的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>楼层点亮示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .section {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #ccc;
        }
        .nav {
            position: fixed;
            top: 0;
            width: 100%;
            background: #fff;
            padding: 10px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .nav a {
            margin: 0 10px;
            text-decoration: none;
            color: #333;
        }
        .nav a.active {
            color: #f00;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#section1" class="active">Section 1</a>
        <a href="#section2">Section 2</a>
        <a href="#section3">Section 3</a>
    </div>
    <div id="section1" class="section">Section 1</div>
    <div id="section2" class="section">Section 2</div>
    <div id="section3" class="section">Section 3</div>

    <script>
        const sections = document.querySelectorAll('.section');
        const navLinks = document.querySelectorAll('.nav a');

        function highlightNav() {
            let current = '';
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const sectionHeight = section.clientHeight;
                if (pageYOffset >= sectionTop - sectionHeight / 3) {
                    current = section.getAttribute('id');
                }
            });

            navLinks.forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href').substring(1) === current) {
                    link.classList.add('active');
                }
            });
        }

        window.addEventListener('scroll', highlightNav);
    </script>
</body>
</html>

可能遇到的问题及解决方法

性能问题：频繁的DOM操作可能导致性能下降。
- 解决方法：使用requestAnimationFrame优化滚动事件的处理。

function highlightNav() {
    // 原有逻辑
}

let ticking = false;
window.addEventListener('scroll', () => {
    if (!ticking) {
        window.requestAnimationFrame(() => {
            highlightNav();
            ticking = false;
        });
        ticking = true;
    }
});