JavaScript侧边栏平滑滚动与导航高亮失效：事件监听器误用排查与修复

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-overlay" id="side-overlay">
    <div class="faq_sidebar" id="faqs">
        <!-- ... 侧边栏头部内容 ... -->

        <div class="faq_section2">
            <nav class="navigation" id="mainNav">
                <a class="navigation__link" href="#1">What is Lorem Ipsum?</a>
                <a class="navigation__link" href="#2">Why do we use it?</a>
                <a class="navigation__link" href="#3">Where does it come from?</a>
                <a class="navigation__link" href="#4">Where can I get some?</a>
                <a class="navigation__link" href="#5">What is Lorem Ipsum?</a>
            </nav>

            <div class="tab-content">
                <div class="nestednav">
                    <div class="page-section hero" id="1"><h1>section 1</h1><p>...</p></div>
                    <div class="page-section" id="2"><h1>section 2</h1><p>...</p></div>
                    <div class="page-section" id="3"><h1>Section Three</h1><p>...</p></div>
                    <div class="page-section" id="4"><h1>Section Four</h1><p>...</p></div>
                    <div class="page-section" id="5"><h1>Section Five</h1><p>...</p></div>
                </div>
            </div>
        </div>
    </div>
</div>

$(document).ready(function () {
    // 1. 平滑滚动到指定区域
    $('a[href*=\#]').bind('click', function (e) {
        // e.preventDefault(); // 阻止默认的锚点跳转行为，启用纯粹的平滑滚动。
                          // 如果希望URL哈希值也随之改变，可以注释掉此行。

        var target = $(this).attr("href"); // 获取目标锚点的href值
        console.log("Scrolling to:", target);

        // 使用jQuery的animate方法实现平滑滚动
        $('html, body').animate({
            scrollTop: $(target).offset().top // 计算目标元素相对于文档顶部的距离
        }, 600); // 滚动动画持续时间为600毫秒
    });

    // 2. 导航链接激活状态高亮
    // 正确将滚动事件监听器绑定到window对象
    window.addEventListener('scroll', () => {
        var scrollDistance = $(window).scrollTop(); // 获取当前滚动距离

        // 遍历所有内容区域，根据滚动位置判断哪个区域当前可见
        $('.page-section').each(function (i) {
            // 如果当前区域的顶部位置小于或等于滚动距离
            if ($(this).position().top <= scrollDistance) {
                $('.navigation a.active').removeClass('active'); // 移除当前激活链接的active类
                $('.navigation a').eq(i).addClass('active');     // 为对应的新链接添加active类
            }
        });
    });

    // 3. 导航栏吸顶效果
    var fixmeTop = $('.navigation').offset().top; // 获取导航栏的初始顶部位置

    // 正确将滚动事件监听器绑定到window对象
    window.addEventListener('scroll', () => {
        var currentScroll = $(window).scrollTop(); // 获取当前滚动距离

        // 如果当前滚动距离大于或等于导航栏的初始顶部位置
        if (currentScroll >= fixmeTop) {
            // 当滚动超过导航栏时，将其定位为fixed，使其保持在顶部
            $('.navigation').css({
                position: 'fixed', // 使用fixed定位
                top: '80px',       // 距离视口顶部80px
                float: 'left'      // 保持左浮动
            });
        } else {
            // 当滚动回到导航栏初始位置上方时，恢复其原始定位
            $('.navigation').css({
                position: 'absolute', // 恢复absolute定位（或relative，取决于原始CSS）
                top: 'auto',          // 恢复自动顶部位置
                float: 'left'
            });
        }
    });
});