mmenu.js v9.3：菜单未触发前头部无法固定的问题求助

DevOps 小满

2026-6-26

解决方案：mmenu.js v9.3 固定头部需触发汉堡按钮才生效问题

方案1：初始化后手动触发头部固定逻辑

mmenu可能仅在菜单切换时才初始化头部固定的相关样式/逻辑，可在mmenu初始化完成后，手动添加固定类或调用内部更新方法：

// 初始化mmenu实例
const menu = new Mmenu("#menu", {
  pageScroll: {
    // 你的pageScroll配置项
  }
});

// 初始化完成后执行头部固定操作
menu.init.then(() => {
  // 替换为你的头部选择器
  const headerEl = document.querySelector(".header");
  headerEl.classList.add("fixed-header"); // 假设你的固定样式类是fixed-header
  // 调用mmenu内部更新方法，确保布局适配
  menu.instance.update();
});

方案2：显式配置fixedHeaders选项

新版mmenu已将固定头部功能整合进主库，需在初始化配置中显式开启并指定头部元素，避免依赖菜单触发：

const menu = new Mmenu("#menu", {
  fixedHeaders: {
    header: ".header", // 指定你的头部选择器
    offset: 0 // 可根据需求设置偏移量
  },
  pageScroll: {
    // 你的pageScroll配置项
  }
});

方案3：独立实现固定头部（绕过mmenu干扰）

若上述方案无效，可直接用原生CSS/JS实现固定头部，避免mmenu的样式覆盖：

CSS方式（应急用）

.header {
  position: fixed !important;
  top: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}

JS方式（更灵活）

// 监听滚动事件实现固定
window.addEventListener("scroll", () => {
  const headerEl = document.querySelector(".header");
  if (window.scrollY > 0) {
    headerEl.classList.add("fixed-header");
  } else {
    headerEl.classList.remove("fixed-header");
  }
});

// 确保页面加载时就应用初始状态
document.addEventListener("DOMContentLoaded", () => {
  const headerEl = document.querySelector(".header");
  if (window.scrollY > 0) {
    headerEl.classList.add("fixed-header");
  }
});