JavaScript侧边栏滚动定位失效解决方法

然而，核心问题出在以下两处滚动事件监听器的实现上：

e.addEventListener('scroll', () => { /* ... */ });

以及：

e.addEventListener('scroll', () => { /* ... */ });

在这里，e被错误地用作了事件目标。在JavaScript中，addEventListener()方法必须在一个有效的EventTarget对象上调用，例如window、document或具体的DOM元素。在这些上下文中，e通常是事件回调函数内部用于表示事件对象（Event object）的参数，而不是一个可以附加事件监听器的全局或DOM对象。因此，将滚动事件监听器绑定到一个未定义的e变量上，会导致这些监听器根本不会被触发，从而使依赖于滚动事件的功能（如导航高亮和导航栏定位）失效。

解决方案：正确绑定滚动事件监听器

要解决这个问题，我们需要将所有针对页面滚动事件的监听器绑定到全局的window对象上。window对象代表浏览器窗口，是监听全局滚动事件的正确目标。

以下是修正后的JavaScript代码：

$(document).ready(function () {
    // 1. 平滑滚动到指定区域
    $('a[href*=\\#]').bind('click', function (e) {
        // e.preventDefault(); // 如果需要阻止默认的哈希跳转行为，请取消注释
        var target = $(this).attr("href");
        console.log(target);
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 600);
    });

    // 2. 滚动时激活导航链接
    window.addEventListener('scroll', () => {
        var scrollDistance = $(window).scrollTop();

        $('.page-section').each(function (i) {
            if ($(this).position().top <= scrollDistance + 1) { // +1 增加一些容错空间
                $('.navigation a.active').removeClass('active');
                $('.navigation a').eq(i).addClass('active');
            }
        });
    });

    // 3. 导航栏固定/相对定位切换
    // 注意：这里获取fixmeTop的时机很重要，应在DOM加载完毕后获取
    var fixmeTop = $('.navigation').offset().top; // 获取导航栏的初始顶部位置

    window.addEventListener('scroll', () => {
        var currentScroll = $(window).scrollTop(); // 获取当前滚动位置

        if (currentScroll >= fixmeTop) {
            console.log("Greater value");
            $('.navigation').css({
                position: 'fixed', // 当滚动超过初始位置时，固定导航栏
                top: '0px', // 可以根据需要调整
                left: '0px', // 确保固定后位置正确
                width: '100%' // 确保固定后宽度正确
            });
        } else {
            console.log("Smaller value");
            $('.navigation').css({
                position: 'absolute', // 恢复初始定位
                top: fixmeTop + 'px', // 恢复到初始的顶部位置
                float: 'left' // 保持原有浮动
            });
        }
    });
});

代码说明：