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

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

$(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' // 保持原有浮动
            });
        }
    });
});

1. *平滑滚动到指定区域 (`$('a[href=\#]').bind('click', ...)`):**
   • 此部分负责监听所有href属性包含#的标签的点击事件。
   • 当点击发生时，它获取链接的目标ID（例如#1），然后使用jQuery的animate()方法，将html和body元素的scrollTop属性平滑地滚动到目标元素相对于文档顶部的偏移量($(target).offset().top)。
   • e.preventDefault(); 被注释掉，这意味着浏览器默认的锚点跳转行为可能会发生。如果希望完全由JavaScript控制平滑滚动，并阻止浏览器默认行为，应取消注释此行。
2. 滚动时激活导航链接 (window.addEventListener('scroll', ...)):
   • 此监听器绑定到window对象，以便在用户滚动页面时触发。
   • 它遍历所有具有page-section类的元素，并根据当前滚动距离判断哪个区域进入了视口。
   • 当某个区域进入视口时，对应的导航链接会被添加active类，而其他链接的active类会被移除，实现导航高亮效果。
   • + 1的调整是为了在滚动到区域顶部时能更准确地触发高亮。
3. 导航栏固定/相对定位切换 (window.addEventListener('scroll', ...)):
   • 同样，此监听器也绑定到window对象。
   • 它首先在DOM加载完毕时获取导航栏的初始顶部位置fixmeTop。
   • 在滚动事件中，它比较当前滚动距离currentScroll和fixmeTop。
   • 如果currentScroll大于或等于fixmeTop，则将导航栏的position设置为fixed，并调整top和left以使其固定在视口顶部。
   • 否则，导航栏恢复到absolute定位，并回到其初始的top位置。请注意，这里的position: 'absolute'和top: fixmeTop + 'px'是根据原始代码的逻辑推断，实际应用中可能需要根据具体CSS布局调整为position: 'static'或position: 'relative'，并移除top属性。

完整的HTML结构示例

为了使上述JavaScript代码正常工作，页面需要包含相应的HTML结构和jQuery库。

    
    
    
    
    
    



    

        

            

                

                    

                        
FAQ’s
                        
You have questions, we have answers
                    
                    

                        
                    
                
            

            

                

                

                    

                        

                            
section 1
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                        
                        

                            
section 2
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                        
                        

                            
Section Three
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                        
                        

                            
Section Four
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                        
                        

                            
Section Five
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?
                        
                    
                
            
        
    

注意事项：

• jQuery 引入： 确保在您的HTML文件的或底部引入了jQuery库，因为示例代码中大量使用了jQuery语法。
• CSS 样式： 为了使侧边栏和导航效果正常显示，需要有相应的CSS样式来控制其布局、定位和视觉表现。示例HTML中包含了一些基础样式，您可能需要根据实际设计进行调整。
• e.preventDefault()： 在处理点击事件时，如果希望完全通过JavaScript控制滚动行为，并阻止浏览器默认的锚点跳转（即URL哈希值变化），请务必取消注释e.preventDefault();。
• fixmeTop 的获取时机： var fixmeTop = $('.navigation').offset().top; 这一行必须在DOM完全加载并且导航栏元素在页面上已经定位好之后执行，否则获取到的值可能不准确。将其放在$(document).ready()内部是正确的做法。
• 侧边栏滚动： 如果侧边栏内部的内容也需要滚动，确保.faq_sidebar或其内部容器设置了overflow-y: auto;。本教程主要关注主页面内容的滚动。
• 性能优化： 对于频繁触发的scroll事件，可以考虑使用节流（throttle）或防抖（debounce）技术来优化性能，减少回调函数的执行次数。

总结

正确处理JavaScript中的事件监听器是构建健壮和交互性强的Web应用的关键。本教程通过修正一个常见的错误——将滚动事件监听器绑定到未定义的变量而非window对象，成功解决了侧边栏导航点击滚动失效、导航高亮不工作以及导航栏定位异常的问题。理解addEventListener()的工作原理以及EventTarget的概念对于避免此类问题至关重要。遵循这些最佳实践，可以确保您的Web应用提供流畅且响应迅速的用户体验。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript侧边栏滚动定位失效解决方法》文章吧，也可关注golang学习网公众号了解相关技术文章。