如何让滚动添加active类的jQuery代码更具动态性与功能性？

嘿，看了你的这段jQuery代码，能正常运行但确实有不少可以优化的地方——重复的if判断、硬编码的tab ID，不仅维护起来麻烦，性能也有提升空间。我给你整理了一套更具动态性和可维护性的优化方案，一起来看看：

核心优化思路 #

• 告别硬编码：从导航链接的href自动关联目标区块，新增/删除tab时无需修改JS代码
• DOM缓存提升性能：提前缓存常用DOM元素，避免滚动时重复查找
• 防抖减少不必要计算：滚动事件触发频繁，加防抖避免页面卡顿
• 简化逻辑，提升扩展性：用遍历替代重复的if判断，代码更简洁易维护

优化后的完整代码 #

$(document).ready(function() {
  // 先检查导航容器是否存在，不存在直接退出
  const $navContainer = $('.reglementation .nav.nav-pills');
  if (!$navContainer.length) return;

  // 缓存所有导航链接
  const $navLinks = $navContainer.find('a');
  // 动态生成目标区块的信息数组（关联链接与对应区块）
  const tabSections = $navLinks.map(function() {
    const targetSelector = $(this).attr('href');
    const $targetBlock = $(targetSelector);
    // 只保留存在的目标区块
    return $targetBlock.length ? {
      link: $(this),
      target: $targetBlock,
      topOffset: $targetBlock.offset().top
    } : null;
  }).get().filter(Boolean);

  // 防抖函数：避免滚动事件频繁触发
  let scrollTimer;
  const handleScroll = () => {
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(() => {
      const currentScrollPos = $(document).scrollTop() + 20;
      let activeNavLink = null;

      // 遍历区块，找到当前滚动位置对应的最后一个区块（确保优先级正确）
      tabSections.forEach(section => {
        if (currentScrollPos >= section.topOffset) {
          activeNavLink = section.link;
        }
      });

      // 更新导航的active状态
      if (activeNavLink) {
        $navLinks.removeClass('active');
        activeNavLink.addClass('active');
      }
    }, 50); // 50ms防抖间隔，可根据需求调整
  };

  // 绑定滚动事件
  $(window).on('scroll', handleScroll);
  // 页面加载时自动执行一次，确保初始位置的导航项正确激活
  handleScroll();

  // 额外：窗口大小改变时重新计算区块位置（适配响应式布局）
  $(window).on('resize', () => {
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(() => {
      // 重新计算每个区块的顶部偏移量
      tabSections.forEach(section => {
        section.topOffset = section.target.offset().top;
      });
      // 重新检查当前滚动位置
      handleScroll();
    }, 100);
  });
});

优化点详解 #

1. 动态关联区块：不再硬编码#tab272这类ID，而是从导航链接的href自动获取目标区块，HTML结构变更时JS代码无需调整，完全适配动态场景。
2. DOM缓存：提前缓存了$navContainer、$navLinks和所有区块的信息，避免每次滚动都重复查询DOM，大幅降低性能消耗。
3. 防抖处理：滚动事件只会在停止滚动50ms后执行一次，避免了滚动过程中频繁触发DOM操作导致的页面卡顿。
4. 初始化检查：页面加载完成后自动执行一次滚动逻辑，确保初始位置对应的导航项处于激活状态，原代码没有这个功能，优化后体验更完整。
5. 响应式适配：新增窗口大小改变的监听，重新计算区块位置，确保在页面布局变化时导航激活逻辑依然准确。

额外建议 #

如果你的页面存在动态加载的区块（比如AJAX加载内容），可以把生成tabSections数组的逻辑封装成一个独立函数，在内容加载完成后重新调用，确保区块位置信息是最新的。

内容的提问来源于stack exchange，提问作者Mohamed sadok yahyaoui