响应式导航高亮滚动效果：仅在桌面端启用平滑标签切换动画

本文介绍如何为 bootstrap 导航栏的「活动项高亮滑动效果」添加响应式控制，确保该交互动画仅在屏幕宽度大于 750px 时生效，并在窗口缩放时动态启停，避免移动端误触发。

要实现导航菜单高亮条（.active-highlight）的平滑滑动效果，同时仅在桌面端（≥750px）启用、移动端自动禁用，关键在于：不能仅依赖页面加载时的一次性判断，而需在 resize 事件中实时检测视口宽度，并动态管理事件绑定与样式逻辑。

✅ 正确做法：使用 window.innerWidth + 动态状态管理

window.innerWidth 返回的是当前可视区域宽度（含滚动条），比 $(document).width() 更准确反映用户实际看到的屏幕尺寸，且无需 jQuery 依赖，性能更优。

以下是重构后的完整脚本（兼容 jQuery + Bootstrap 5）：

DecoHack

DecoHack是一个专注分享产品设计、开发、运营与推广的博客周刊

下载

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

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

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

    const navTabs = $('.nav-tabs');
    const activeTab = navTabs.find('.active > a');
    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();

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

    highlight.css({
      width: width + 'px',
      height: height + 'px',
      left: left + 'px',
      top: top + 'px'
    });
  }

  // 绑定事件（仅桌面模式）
  function bindEvents() {
    if (!isDesktopMode) return;

    $(window).on('resize.highlight', function() {
      isDesktopMode = window.innerWidth > 750;
      if (isDesktopMode) {
        updateHighlight(false, true);
      } else {
        // 移除高亮条，释放资源
        $('.nav-tabs .active-highlight').remove();
      }
    });

    $('[data-bs-toggle="tab"]').on('shown.bs.tab.highlight', function() {
      updateHighlight();
    });
  }

  // 启动逻辑
  initHighlight();
  updateHighlight(true);
  bindEvents();
});

⚠️ 注意事项与最佳实践

• 避免重复初始化：使用 isDesktopMode 标志位控制逻辑开关，防止在缩放过程中反复创建/销毁 .active-highlight 元素；
• 事件解耦：为 resize 和 shown.bs.tab 事件添加命名空间（如 .highlight），便于后续精确解绑（例如页面卸载前调用 $(window).off('.highlight')）；
• 移动端兜底：当进入移动端（
• CSS 补充建议：为 .active-highlight 添加 pointer-events: none;，避免遮挡下方链接点击；
• 无障碍友好：该效果纯属视觉增强，不改变语义结构或焦点顺序，符合 WCAG 原则。

✅ 总结

响应式交互的核心不是“写一次条件判断”，而是建立可感知、可响应、可回收的状态闭环。通过 window.innerWidth 实时判断 + 命名空间化事件管理 + 显式启停逻辑，即可优雅实现「桌面端滑动高亮、移动端静默退场」的体验目标，兼顾性能、可维护性与用户体验一致性。