如何在max-width:786px断点禁用滚动触发导航并显示菜单？

没问题，这个需求完全可以实现，咱们分两步来搞定：先通过CSS处理小屏幕下菜单始终显示的样式，再调整JavaScript逻辑，让滚动触发的功能只在大屏幕下生效。

1. CSS 样式调整 #

首先修改你的CSS，添加媒体查询，确保在屏幕宽度≤786px时，导航菜单始终显示：

/* 默认状态下隐藏导航 */
nav {
  display: none;
}

/* 滚动时显示导航的类 */
.show {
  display: block;
}

/* 小屏幕断点：始终显示导航 */
@media (max-width: 786px) {
  nav {
    display: block !important;
    /* 用!important确保优先级足够，也可以通过给nav加专属类名来提升选择器权重替代 */
  }
}

这样一来，小屏幕下不管JavaScript有没有给nav添加show类，菜单都会保持显示状态。

2. JavaScript 逻辑优化 #

接下来修改你的JS代码，让滚动触发的逻辑只在大屏幕（宽度>786px）时生效，同时监听窗口大小变化，确保窗口 resize 时逻辑能及时切换：

方案一：监听 scroll + resize 事件（简单直接） #

$(window).on("scroll resize", function() {
  const currentWidth = $(window).width();
  
  // 仅在大屏幕下执行滚动显示/隐藏逻辑
  if (currentWidth > 786) {
    if ($(window).scrollTop() > 0) {
      $('nav').addClass('show');
    } else {
      $('nav').removeClass('show');
    }
  } else {
    // 小屏幕下清理show类（避免冗余，不影响CSS的显示效果）
    $('nav').removeClass('show');
  }
});

方案二：使用 matchMedia API（更高效） #

如果想避免resize事件频繁触发带来的性能损耗，可以用浏览器原生的matchMedia API监听媒体查询状态，只在断点切换时调整逻辑：

// 创建媒体查询对象，匹配大屏幕（宽度≥787px）
const largeScreenQuery = window.matchMedia('(min-width: 787px)');

// 定义导航逻辑处理函数
function handleNavVisibility(query) {
  if (query.matches) {
    // 大屏幕下，绑定滚动事件，用toggleClass简化逻辑
    $(window).on("scroll", function() {
      $('nav').toggleClass('show', $(window).scrollTop() > 0);
    });
  } else {
    // 小屏幕下，解绑滚动事件，清理show类
    $(window).off("scroll");
    $('nav').removeClass('show');
  }
}

// 页面加载时执行一次初始逻辑
handleNavVisibility(largeScreenQuery);
// 监听媒体查询状态变化（窗口大小跨断点时触发）
largeScreenQuery.addEventListener('change', handleNavVisibility);

这个方案的优势是，只有当窗口大小跨越786px断点时才会触发逻辑调整，比监听resize事件更高效。

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