如何为滚动收缩导航的JavaScript添加媒体查询断点？

原有的滚动收缩导航栏逻辑仅针对单一阈值生效，要实现不同屏幕断点下的差异化样式，可借助JavaScript的window.matchMedia()API检测当前屏幕尺寸，结合滚动事件动态切换样式规则，具体修改如下：

核心思路 #

• 预先定义各断点的配置（包含滚动触发阈值、收缩/展开状态的样式参数）
• 滚动时先判断当前屏幕匹配的断点，再应用对应配置的样式
• 监听窗口 resize 事件，确保屏幕尺寸变化时自动切换断点配置

修改后的完整代码 #

// 定义各断点的配置：键为媒体查询规则，值为对应参数
const breakpointConfigs = {
  '(min-width: 1200px)': {
    scrollThreshold: 80,
    shrinkNavPadding: '30px 10px',
    shrinkLogoSize: '25px',
    defaultNavPadding: '80px 10px',
    defaultLogoSize: '35px'
  },
  '(min-width: 768px) and (max-width: 1199px)': {
    scrollThreshold: 60,
    shrinkNavPadding: '20px 10px',
    shrinkLogoSize: '22px',
    defaultNavPadding: '60px 10px',
    defaultLogoSize: '30px'
  },
  '(max-width: 767px)': {
    scrollThreshold: 40,
    shrinkNavPadding: '15px 10px',
    shrinkLogoSize: '20px',
    defaultNavPadding: '50px 10px',
    defaultLogoSize: '28px'
  }
};

// 获取当前匹配的断点配置
function getCurrentConfig() {
  for (const query in breakpointConfigs) {
    if (window.matchMedia(query).matches) {
      return breakpointConfigs[query];
    }
  }
  // 默认返回大屏配置（兜底）
  return breakpointConfigs['(min-width: 1200px)'];
}

// 滚动触发的样式调整函数
function scrollFunction() {
  const config = getCurrentConfig();
  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  const navbar = document.getElementById('navbar');
  const logo = document.getElementById('logo');

  if (scrollTop > config.scrollThreshold) {
    navbar.style.padding = config.shrinkNavPadding;
    logo.style.fontSize = config.shrinkLogoSize;
  } else {
    navbar.style.padding = config.defaultNavPadding;
    logo.style.fontSize = config.defaultLogoSize;
  }
}

// 绑定滚动事件
window.onscroll = scrollFunction;
// 绑定窗口 resize 事件，确保断点切换时重新计算
window.onresize = scrollFunction;

// 页面加载时先执行一次，确保初始样式正确
scrollFunction();

说明 #

• 可根据需求修改breakpointConfigs中的媒体查询规则和对应样式参数，新增或删除断点只需调整这个对象
• getCurrentConfig()函数会自动匹配当前屏幕对应的配置，无需手动判断窗口宽度
• 新增窗口 resize 事件监听，避免屏幕尺寸变化后样式不更新
• 页面加载时自动执行一次scrollFunction()，确保初始状态符合当前屏幕的样式规则

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