如何合并两段实现导航栏滚动控制的JavaScript代码？

安全阿岳

2026-8-16

问题原因

两段脚本单独运行正常，但合并后失效的核心原因是两次给window.onscroll赋值，后一个函数会直接覆盖前一个，导致只有背景色切换的逻辑生效，导航栏的显示/隐藏逻辑被丢弃。

解决方案

把两个逻辑整合到同一个滚动事件处理函数中，同时优化代码（比如缓存DOM元素、使用更现代的变量声明），确保所有逻辑都能执行：

<script>
// 缓存导航栏元素，避免每次滚动重复查找DOM
const navbar = document.getElementById("navbar");
let prevScrollpos = window.pageYOffset;

window.onscroll = function() {
  const currentScrollPos = window.pageYOffset;

  // 控制导航栏显示/隐藏的逻辑
  if (prevScrollpos > currentScrollPos) {
    navbar.style.top = "0";
  } else {
    navbar.style.top = "-85px";
  }
  prevScrollpos = currentScrollPos;

  // 控制导航栏背景色的逻辑
  if (document.body.scrollTop > 85 || document.documentElement.scrollTop > 85) {
    navbar.style.background = "#fff";
  } else {
    navbar.style.background = "none";
  }
}
</script>

额外优化建议

可以把样式控制从JS转移到CSS类，通过添加/移除类来实现效果，让代码更易维护：

.navbar-hidden {
  top: -85px !important;
}
.navbar-white-bg {
  background: #fff !important;
}

对应的JS修改为：

<script>
const navbar = document.getElementById("navbar");
let prevScrollpos = window.pageYOffset;

window.onscroll = function() {
  const currentScrollPos = window.pageYOffset;

  // 控制显示/隐藏
  if (prevScrollpos > currentScrollPos) {
    navbar.classList.remove("navbar-hidden");
  } else {
    navbar.classList.add("navbar-hidden");
  }
  prevScrollpos = currentScrollPos;

  // 控制背景色
  if (document.body.scrollTop > 85 || document.documentElement.scrollTop > 85) {
    navbar.classList.add("navbar-white-bg");
  } else {
    navbar.classList.remove("navbar-white-bg");
  }
}
</script>