响应式导航高亮滚动效果：仅在屏幕宽度大于750px时启用-js教程-PHP中文网

响应式导航高亮滚动效果：仅在屏幕宽度大于750px时启用

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

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

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

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

魔珐星云

无需昂贵GPU，一键解锁超写实/二次元等多风格3D数字人，跨端适配千万级并发的具身智能平台。

下载

$(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 在  上，非 

    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('
');
      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();
    }
  });
});