如何为导航菜单启用响应式滚动高亮效果（仅在屏幕宽度大于750px时生效）

本文介绍如何实现导航标签栏的动态高亮滑动效果，并确保该功能仅在桌面端（屏幕宽度 > 750px）启用，通过监听 `resize` 事件实时响应窗口尺寸变化，避免因未刷新页面导致的响应失效问题。

要让导航菜单的滑动高亮效果（如 .active-highlight 动态跟随激活 Tab）智能适配设备断点，关键在于：不仅需在页面加载时判断屏幕尺寸，更需在窗口缩放过程中持续校验并启停逻辑。直接使用 $(document).width() 在 resize 中检测存在兼容性与时机问题；而 window.innerWidth 是更可靠、标准的视口宽度获取方式，且能实时反映当前浏览器窗口尺寸。

以下是优化后的完整实现方案：

DALL·E 2

OpenAI基于GPT-3模型开发的AI绘图生成工具，可以根据自然语言的描述创建逼真的图像和艺术。

下载

✅ 正确做法：基于 window.innerWidth 的动态启停控制

$(document).ready(function() {
  let isDesktopMode = window.innerWidth > 750;

  // 初始化高亮元素（仅在桌面模式下执行）
  function initHighlight() {
    if (!isDesktopMode) return;
    const navTabs = $('.nav-tabs');
    if (navTabs.find('.active-highlight').length === 0) {
      navTabs.prepend('
');
    }
  }

  // 更新高亮位置（仅在桌面模式下执行）
  function updateHighlight(resize = false) {
    if (!isDesktopMode) return;

    const navTabs = $('.nav-tabs');
    const activeTab = navTabs.find('.active');
    if (!activeTab.length) return;

    const navPos = navTabs.offset();
    const tabPos = activeTab.offset();

    const highlight = navTabs.find('.active-highlight');
    const left = tabPos.left - navPos.left;
    const top = tabPos.top - navPos.top;
    const width = activeTab.outerWidth();
    const height = activeTab.outerHeight();

    highlight.css({
      'transition': resize ? 'none' : 'all .5s ease',
      'width': width + 'px',
      'height': height + 'px',
      'left': left + 'px',
      'top': top + 'px'
    });
  }

  // 页面加载时初始化
  initHighlight();
  updateHighlight(true); // 首次无过渡

  // 监听窗口尺寸变化，动态切换模式并更新状态
  $(window).on('resize', function() {
    const newMode = window.innerWidth > 750;
    if (newMode !== isDesktopMode) {
      isDesktopMode = newMode;
      if (isDesktopMode) {
        initHighlight();
        updateHighlight(true);
      } else {
        // 移除高亮（可选：提升移动端性能/语义清晰）
        $('.nav-tabs .active-highlight').remove();
      }
    } else if (isDesktopMode) {
      updateHighlight();
    }
  });

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

⚠️ 注意事项与最佳实践

• 避免重复初始化：使用 isDesktopMode 标志位控制逻辑开关，防止在 resize 过程中反复创建 .active-highlight 元素；
• 移动端优雅降级：当进入移动端（≤750px），主动移除高亮元素，既节省资源，也避免样式残留干扰；
• 性能优化：resize 事件高频触发，此处未做防抖（debounce），因逻辑轻量；若项目复杂，建议添加 requestAnimationFrame 或节流处理；
• CSS 补充建议：为确保 .active-highlight 在小屏下完全隐藏（即使 JS 未及时移除），可在 CSS 中追加：

  @media (max-width: 750px) {
    .nav-tabs > .active-highlight {
      display: none !important;
    }
  }

该方案彻底解决了“仅刷新生效”的缺陷，实现了真正的响应式交互——无论用户是首次访问、横竖屏切换，还是拖拽浏览器窗口，高亮行为均能精准匹配当前设备视口，兼顾体验与健壮性。