实现Header滚动显示/隐藏功能并修正位置问题（JS）

你遇到的问题根源在于.header的position: sticky设置了固定的top: 3.75rem——这个值刚好等于顶部导航栏.nav的总高度（20px高度 + 上下各20px padding = 60px，3.75rem=60px）。当向下滚动隐藏.nav后，.header的sticky锚点依然锁定在距离顶部3.75rem的位置，所以不会自动顶到页面顶部。

解决方案1：JS动态调整Header的sticky位置 #

直接在切换导航栏显示状态时，同步修改.header的top样式，让它在导航隐藏时顶到页面顶部：

var prev = 0;
var nav = document.getElementById("js-scroll-top");
var header = document.querySelector(".header");

window.addEventListener("scroll", function () {
  var scrollTop = window.pageYOffset || 0;

  if (scrollTop > prev) {
    nav.classList.add("hidden");
    header.style.top = "0";
  } else {
    nav.classList.remove("hidden");
    header.style.top = "3.75rem";
  }

  prev = scrollTop;
});

给.header加上过渡效果，让位置切换更平滑：

.header {
  display: flex;
  background-color: #fff;
  justify-content: center;
  color: #000;
  width: 100%;
  height: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: sticky;
  top: 3.75rem;
  transition: top 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

解决方案2：用CSS变量实现样式与逻辑分离 #

通过CSS变量控制.header的top值，JS只负责切换状态类，更符合前端分离原则：

:root {
  --nav-height: 3.75rem;
}

.header {
  display: flex;
  background-color: #fff;
  justify-content: center;
  color: #000;
  width: 100%;
  height: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: sticky;
  top: var(--nav-height);
  transition: top 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* 导航隐藏时修改变量值 */
body.nav-hidden :root {
  --nav-height: 0;
}

var prev = 0;
var nav = document.getElementById("js-scroll-top");
var body = document.body;

window.addEventListener("scroll", function () {
  var scrollTop = window.pageYOffset || 0;

  if (scrollTop > prev) {
    nav.classList.add("hidden");
    body.classList.add("nav-hidden");
  } else {
    nav.classList.remove("hidden");
    body.classList.remove("nav-hidden");
  }

  prev = scrollTop;
});

两种方案都能解决问题，可根据自己的代码习惯选择。测试时注意滚动速度较快的场景，确保过渡效果流畅无卡顿。

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