如何实现JavaScript响应式导航菜单粘性效果（展开时不偏移）

这个问题的核心在于你的collapse函数里，直接通过比较整个className来切换响应式状态，这会导致当导航同时拥有sticky和responsive类时，判断逻辑出错，甚至会意外移除sticky类，让菜单回到页面顶部。

问题分析 #

你的collapse函数当前逻辑是：

function collapse() {
  if (navbar.className === "responsive") {
    navbar.classList.remove("responsive");
  } else {
    navbar.classList.add("responsive")
  }
}

当导航已经被添加了sticky类后，navbar.className会变成类似"sticky responsive"或者"sticky"，这时候navbar.className === "responsive"的判断永远为假，函数会一直执行添加responsive的操作；更糟的是，如果之前你直接修改过className（而不是用classList），可能会直接覆盖掉sticky类，导致菜单失去粘性。

修复方案 #

我们需要修改collapse函数，改用classList.contains来检查responsive类的存在，或者更简单的用classList.toggle来一键切换，这样就能保证sticky类不会被意外移除：

方案1：使用classList.toggle（推荐）

function collapse() {
  navbar.classList.toggle("responsive");
}

这个方法最简洁，toggle会自动检测元素是否包含指定类，存在则移除，不存在则添加，完全不会影响其他已有的类（比如sticky）。

方案2：使用classList.contains判断

如果你想保留手动判断的逻辑，可以改成：

function collapse() {
  if (navbar.classList.contains("responsive")) {
    navbar.classList.remove("responsive");
  } else {
    navbar.classList.add("responsive");
  }
}

这种方式明确检查responsive类的存在，不会受其他类（比如sticky）的影响。

额外注意事项 #

同时要确保你的CSS中，sticky类和responsive类可以共存，比如：

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  /* 其他粘性样式 */
}

.responsive {
  /* 响应式导航的样式，比如菜单展开后的布局 */
}

要保证当两个类同时存在时，position: fixed依然生效，不会被responsive类的样式覆盖。

这样修改后，不管是滚动时添加sticky类，还是点击切换响应式菜单，两个类都能正常共存，导航菜单会一直保持在顶部，不会回到页面开头。

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