Bootstrap Scrollspy导航激活正常，无法通过jQuery捕获activate事件求助

我来帮你搞定这个Scrollspy事件捕获的问题——你说导航激活正常但自定义事件没触发，这种情况大概率是初始化冲突或者事件绑定的位置不对，咱们一步步来排查：

1. 先去掉重复的Scrollspy初始化 #

你现在同时用了HTML属性（data-spy="scroll"等）和JS代码来初始化Scrollspy，这会导致实例重复创建，很可能干扰事件触发。建议只保留一种初始化方式，比如删掉body上的data属性，只用JS初始化：

<body>
  <!-- 你的导航栏结构 -->
  <script>
    $(document).ready(function(){
      // 唯一的Scrollspy初始化
      $('body').scrollspy({target: "#navbar", offset: 30});
    });
  </script>
</body>

2. 调整事件绑定的目标元素 #

有些Bootstrap版本中，activate.bs.scrollspy事件其实是触发在**Scrollspy的挂载元素（也就是body）**上，而不是导航栏本身。你可以试试把事件绑定到body或者document上，确保能捕获到事件：

$(document).ready(function(){
  $('body').scrollspy({target: "#navbar", offset: 30});
  
  // 绑定到document上，确保不会错过事件
  $(document).on('activate.bs.scrollspy', function(e) {
    console.log('sparkle, sparkle');
    // 这里可以添加你的自定义逻辑，比如获取当前激活的链接：
    const activeLink = $(e.target).find('.nav-link.active');
    console.log('当前激活的链接：', activeLink.text());
  });
});

3. 检查Bootstrap版本兼容性 #

不同Bootstrap版本的Scrollspy事件细节有差异：

• Bootstrap 3/4：事件名确实是activate.bs.scrollspy，但如果是旧版本（比如Bootstrap 3.0早期版本）可能存在事件触发的bug，建议升级到对应大版本的最新稳定版。
• Bootstrap 5：如果是用ES模块方式引入的Scrollspy，需要确保正确初始化，但你用的是jQuery方式的话，逻辑和3/4基本一致，不过同样建议升级到5.3.x这类最新小版本修复已知问题。

4. 快速调试技巧 #

如果还是没触发，可以在控制台输入下面的代码，看看事件到底有没有触发：

$(document).on('activate.bs.scrollspy', function(e) {
  console.log('事件触发了！触发元素：', e.target);
});

滚动页面后如果控制台有输出，说明事件没问题，只是之前的绑定位置不对；如果没输出，那可能是Scrollspy初始化有问题，检查一下：

• 导航链接的href是否正确对应页面中元素的id
• 页面元素的高度是否足够触发滚动激活（比如内容太少，滚动时没切换到下一个锚点）

内容的提问来源于stack exchange，提问作者phoenixson