如何实现仅在大幅向上滚动时显示的智能导航栏？

导航栏会占据部分屏幕空间，可能影响用户体验。有些滚动隐藏/显示导航栏的方案存在不足：用户小幅向上滚动查看内容时，导航栏立刻弹出会干扰操作。下面是优化后的方案——仅当用户大幅向上滚动时才显示导航栏，同时保留移动端常用的菜单展开/收起功能。

实现代码 #

HTML 结构 #

<body>
  <div class="navbar">
    <div class="open">展开</div>
    <div class="close display-none">收起</div>
  </div>
  <div class="links">
    <div class="zero"></div>
    <div class="one"></div>
    <div class="two">链接1</div>
    <div class="three">链接2</div>
  </div>
</body>

CSS 样式 #

/* 导航栏基础样式 */
.navbar {
  height: 50px;
  background-color: #b7542d;
  width: 100%;
  position: fixed;
  top: 0;
  transition: top 0.5s;
  z-index: 2;
}

.open,
.close {
  color: white;
  float: right;
  margin-right: 50px;
  border: 2px solid white;
  margin-top: 12px;
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
  width: 60px;
  text-align: center;
}

.open:hover,
.close:hover {
  background-color: white;
  color: #b7542d;
}

/* 导航栏隐藏状态 */
.hide-navbar {
  top: -50px;
  transition: top 0.5s;
}

/* 菜单链接容器 */
.links {
  width: 100%;
  height: 0;
  background-color: #b7542d;
  color: white;
  overflow: hidden;
  transition: height 0.5s;
  position: fixed;
  top: 0;
}

.links div {
  padding-left: 40px;
  height: 50px;
  line-height: 50px;
}

.one {
  height: 30px !important;
}

.two:hover,
.three:hover {
  background-color: #a6461f;
}

/* 菜单展开状态 */
.show-links {
  height: 200px;
  transition: height 0.5s;
}

/* 通用隐藏类 */
.display-none {
  display: none;
}

/* 页面基础样式 */
body {
  margin: 0;
  height: 3000px;
}

JavaScript 逻辑 #

// 菜单展开/收起功能
const open = document.querySelector(".open");
const close = document.querySelector(".close");
const links = document.querySelector(".links");
const navbar = document.querySelector(".navbar");

open.addEventListener("click", () => {
  links.classList.add("show-links");
  open.classList.add("display-none");
  close.classList.remove("display-none");
});

close.addEventListener("click", () => {
  links.classList.remove("show-links");
  open.classList.remove("display-none");
  close.classList.add("display-none");
});

// 智能滚动显示/隐藏导航栏
let scrollChange;
let negativeAccumulatedChange = 0;
let prevScrollPos = window.pageYOffset;

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

  // 累计向上滚动的距离
  if (scrollChange < 0) {
    negativeAccumulatedChange += scrollChange;
  } else {
    negativeAccumulatedChange = 0;
  }

  // 向下滚动时隐藏导航栏并收起菜单
  if (scrollChange > 0) {
    navbar.classList.add("hide-navbar");
    links.classList.remove("show-links");
    close?.classList.add("display-none");
    open.classList.remove("display-none");
  }

  // 页面顶部100px范围内始终显示导航栏
  if (currentScrollPos < 100) {
    navbar.classList.remove("hide-navbar");
  }

  // 向上滚动超过250px时显示导航栏
  if (negativeAccumulatedChange < -250) {
    navbar.classList.remove("hide-navbar");
  }

  prevScrollPos = currentScrollPos;
};

内容的提问来源于Stack Exchange，提问作者Dalibor Pavlik