仅在750px以上屏幕生效的导航菜单滚动功能适配问题

你的问题出在只在页面初始化时判断了一次屏幕宽度，窗口尺寸动态变化时没有重新校验，导致移动端下高亮功能仍在运行。下面是修改后的完整代码，实现实时响应屏幕宽度变化，仅在宽度>750px时启用高亮：

修改后的JavaScript代码 #

$(document).ready(function() {
  // 封装桌面端判断逻辑
  function isDesktop() {
    return $(window).width() > 750;
  }

  function active_tab_highlight_pos(init = false, resize = false) {
    // 非桌面端直接隐藏高亮并返回
    if (!isDesktop()) {
      $('.active-highlight').hide();
      return;
    }

    let nav_tabs = $('.nav-tabs');
    let active_tab = $(nav_tabs).find('.active');

    let nav_tabs_pos = {
      x: $(nav_tabs).offset().left,
      y: $(nav_tabs).offset().top
    }

    let active_tab_pos = {
      x: $(active_tab).offset().left - nav_tabs_pos.x,
      y: $(active_tab).offset().top - nav_tabs_pos.y,
      w: $(active_tab).outerWidth(),
      h: $(active_tab).outerHeight()
    }

    if (init) {
      // 初始化时先移除已存在的高亮，避免重复创建
      $(nav_tabs).find('.active-highlight').remove();
      $(nav_tabs).prepend('<li class="active-highlight"></li>');
    }

    let active_highlight = $(nav_tabs).find('.active-highlight');
    active_highlight.show(); // 确保桌面端高亮显示

    if (resize) {
      $(active_highlight).css({
        'transition': 'none'
      });
    } else {
      $(active_highlight).css({
        'transition': 'all .5s ease'
      });
    }

    $(active_highlight).css({
      'width': active_tab_pos.w + 'px',
      'height': active_tab_pos.h + 'px',
      'left': active_tab_pos.x + 'px',
      'top': active_tab_pos.y + 'px'
    });
  }

  // 初始化时仅桌面端创建高亮
  if (isDesktop()) {
    active_tab_highlight_pos(true);
  }
  
  $(window).on('resize', function() {
    let wasDesktop = $('.active-highlight').length > 0;
    let nowDesktop = isDesktop();

    // 从移动端切换到桌面端，重新初始化
    if (!wasDesktop && nowDesktop) {
      active_tab_highlight_pos(true);
    } 
    // 从桌面端切换到移动端，移除高亮
    else if (wasDesktop && !nowDesktop) {
      $('.active-highlight').remove();
    } 
    // 桌面端内resize，更新位置
    else if (nowDesktop) {
      active_tab_highlight_pos(false, true);
    }
  });

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

补充CSS调整（可选） #

可以给高亮元素默认添加display: none，避免页面加载瞬间闪现：

.nav-tabs > .active-highlight {
  display: none;
  position: absolute;
  background: #A700FF;
  border-radius: 10px;
}

.nav-tabs {
  position: relative;
  justify-content: center;
  padding-bottom: 10px;
}

.nav-tabs > li {
  position: relative;
  z-index: 10;
}

.nav-tabs > li > a {
  margin-top: 10px;
  padding: 10px 40px;
  display: block;
  font-size: 18px;
  color: #000;
  border: none;
  text-decoration: none;
  border-radius: 10px;
  transition: color 0.5s ease;
}

.nav-tabs > li > a.active {
  color: #FFF;
}

.info {
  padding: 30px;
  text-align: center;
}

HTML代码（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation">
    <a href="#list1" id="list1-tab" data-bs-toggle="tab" data-bs-target="#list1" role="tab" aria-controls="list1" aria-selected="true" class="active">List 1</a>
  </li>
  <li role="presentation">
    <a href="#list2" id="list2-tab" data-bs-toggle="tab" data-bs-target="#list2" role="tab" aria-controls="list2" aria-selected="false">List 2</a>
  </li>
  <li role="presentation">
    <a href="#list3" id="list3-tab" data-bs-toggle="tab" data-bs-target="#list3" role="tab" aria-controls="list3" aria-selected="false">List 3</a>
  </li>
  <li role="presentation">
    <a href="#list4" id="list4-tab" data-bs-toggle="tab" data-bs-target="#list4" role="tab" aria-controls="list4" aria-selected="false">List 4</a>
  </li>
</ul>

<div class="tab-content">
  <div id="list1" role="tabpanel" aria-labelledby="list1-tab" class="tab-pane active">
    <div class="info">List 1 info</div>
  </div>
  <div id="list2" role="tabpanel" aria-labelledby="list2-tab" class="tab-pane">
    <div class="info">List 2 info</div>
  </div>
  <div id="list3" role="tabpanel" aria-labelledby="list3-tab" class="tab-pane">
    <div class="info">List 3 info</div>
  </div>
  <div id="list4" role="tabpanel" aria-labelledby="list4-tab" class="tab-pane">
    <div class="info">List 4 info</div>
  </div>
</div>

关键修改说明 #

• 新增isDesktop()函数统一判断屏幕宽度，所有触发高亮的逻辑都先校验这个条件
• 窗口resize时不仅更新位置，还会判断状态切换：从移动端切到桌面端重新初始化高亮，从桌面端切到移动端直接移除高亮元素
• 非桌面端直接跳过高亮更新逻辑，避免无效计算和样式异常
• 初始化时仅在桌面端创建高亮元素，减少不必要的DOM操作

内容的提问来源于stack exchange，提问作者Hector