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

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

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

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

✅ 正确做法：基于 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;   } }

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