原生JS实现滚动固定导航栏 类添加后样式不生效问题求助

核心问题 #

• JS操作类名时传参错误：classList.add()、classList.remove() 接收的参数是纯类名字符串，不需要带CSS选择器的.前缀。当前代码传入的是.navbar-fixed，实际加到元素上的类名本身包含.，但CSS里的.navbar-fixed选择器只匹配类名为navbar-fixed（不带点）的元素，选择器和元素类名不匹配，样式自然不会生效。

你在开发者工具中看到类“添加成功”，实际看到的是带.的错误类名，不是CSS规则对应的目标类。

修正代码 #

修复后的JS逻辑 #

const navbar = document.querySelector(".navbar");
window.addEventListener("scroll", () => {
  if (window.scrollY > 80) {
    // 去掉类名前的.，传入纯类名
    navbar.classList.add("navbar-fixed");
  } else {
    navbar.classList.remove("navbar-fixed");
  }
});

可选CSS补全（解决布局抖动） #

position: fixed会让元素脱离普通文档流，不再占据原有位置，导航栏固定后下方内容会出现上移跳变，可以给导航栏加初始样式避免这个问题：

.navbar {
  width: 100%;
  height: 70px; /* 替换为你项目实际的导航栏高度 */
  position: relative;
  z-index: 2;
}

后续排查点 #

如果改完JS样式还是不生效，打开开发者工具选中导航栏元素，在Styles面板检查.navbar-fixed的样式是否被更高优先级的规则覆盖，如果规则被划掉，可以适当提升选择器优先级，比如把固定样式的选择器改为nav.navbar-fixed。

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