本文介绍如何为bootstrap导航栏的动态高亮条添加响应式控制，确保滑动高亮动画仅在桌面端（屏幕宽度 > 750px）生效，并在窗口缩放时实时启停，避免移动端误触发。

要实现导航菜单高亮条的“仅在大屏启用滚动定位功能”，关键在于动态监听视口宽度变化，而非仅在页面加载时做一次判断。原代码中使用 $(document).width() 在 $(document).ready() 中静态检测，导致窗口缩放后状态无法同步——这是典型的响应式交互遗漏。

✅ 正确做法：用 window.innerWidth + resize 实时判断

window.innerWidth 返回当前视口的像素宽度（含滚动条），比 jQuery 的 $(document).width() 更准确、无依赖，且原生性能更优。我们应将核心逻辑封装为可开关的函数，并在初始化和每次 resize 时重新校验条件：

CDP浏览器大师

CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。

下载

$(document).ready(function() {
  let isDesktop = window.innerWidth > 750;
  let highlightActive = false;

  // 核心高亮更新函数（带条件执行）
  function updateActiveHighlight(init = false, skipTransition = false) {
    if (!isDesktop) return; // ❗ 非桌面端直接退出，不执行任何DOM操作

    const navTabs = $('.nav-tabs');
    const activeTab = navTabs.find('.active > a'); // 注意：.active 在 <a> 上，非 <li>

    if (activeTab.length === 0) return;

    const navOffset = navTabs.offset();
    const tabOffset = activeTab.offset();

    const pos = {
      x: tabOffset.left - navOffset.left,
      y: tabOffset.top - navOffset.top,
      w: activeTab.outerWidth(),
      h: activeTab.outerHeight()
    };

    let highlight = navTabs.find('.active-highlight');
    if (init && highlight.length === 0) {
      navTabs.prepend('<li class="active-highlight"></li>');
      highlight = navTabs.find('.active-highlight');
    }

    if (skipTransition) {
      highlight.css('transition', 'none');
      setTimeout(() => highlight.css('transition', 'all .5s ease'), 10);
    }

    highlight.css({
      width: pos.w,
      height: pos.h,
      left: pos.x,
      top: pos.y
    });
  }

  // 初始化（仅桌面）
  if (isDesktop) {
    updateActiveHighlight(true);
  }

  // 监听窗口缩放：动态切换状态 & 更新高亮
  $(window).on('resize', function() {
    const newIsDesktop = window.innerWidth > 750;

    if (newIsDesktop !== isDesktop) {
      isDesktop = newIsDesktop;

      if (isDesktop) {
        // 切回桌面：立即初始化或恢复高亮
        updateActiveHighlight(true);
      } else {
        // 切入移动端：移除高亮元素（可选，提升语义清晰度）
        $('.nav-tabs .active-highlight').remove();
      }
    } else if (isDesktop) {
      // 仍在桌面区间：仅更新位置（如tab切换后缩放需重算）
      updateActiveHighlight(false, true);
    }
  });

  // Tab切换时更新（仅桌面生效）
  $('[data-bs-toggle="tab"]').on('shown.bs.tab', function() {
    if (isDesktop) {
      updateActiveHighlight();
    }
  });
});

⚠️ 注意事项与优化点

• 选择器修正：Bootstrap 5 中 .active 类实际加在 标签上（非
• ），因此 $(navTabs).find('.active') 应改为 $(navTabs).find('.active > a')，否则定位会失败；
• 过渡重置技巧：为避免 resize 过程中过渡动画卡顿，先临时禁用 transition，再用 setTimeout(..., 1) 异步恢复，确保浏览器重绘；
• 移动端清理：当进入移动视图时主动 remove() 高亮元素，可防止残留 DOM 或样式干扰；
• 性能建议：resize 事件高频触发，此处逻辑轻量（仅条件判断+简单计算），无需额外节流；若未来逻辑复杂，可配合 lodash.throttle 优化；
• 无障碍兼容：该功能纯属视觉增强，不影响语义结构与键盘导航，符合 WCAG 基本要求。

✅ 最终效果

• 屏幕 ≥ 751px：高亮条平滑跟随激活 Tab 滑动，支持 Tab 切换与窗口缩放自适应；
• 屏幕 ≤ 750px：完全静默，无高亮元素、无事件绑定、零性能开销；
• 任意尺寸切换（拖拽浏览器边框）：无需刷新，即时响应，行为一致可靠。

通过将响应式逻辑深度融入生命周期（初始化 → resize 监听 → 状态同步 → 条件执行），即可优雅解决“仅大屏启用”的需求，兼顾健壮性与可维护性。