javascript - 即使向下滚动，导航栏也会在第二页上出现一小段时间

Question

我将导航栏的位置设置为绝对位置，但在第一页之后，我希望它在向上滚动时出现在屏幕顶部。所以我把它的位置改为固定的。但即使向下滚动，它也会在第二页上出现一小会儿。

这是我的代码。

const nav = document.getElementsByClassName("nav")[0];

var scrolled = false;
var prevScrollPos = window.pageYOffset;
window.onscroll = function() {
  if (window.pageYOffset > window.innerHeight) {
    if (!scrolled) {
      scrolled = true;
    }
    var currScrollPos = window.pageYOffset;
    if (currScrollPos - prevScrollPos > 30) {
      nav.classList.add("fixHide");
      nav.classList.remove("fixShow");
      prevScrollPos = currScrollPos;
    } else if (prevScrollPos - currScrollPos > 30) {
      nav.classList.add("fixShow");
      nav.classList.remove("fixHide");
      prevScrollPos = currScrollPos;
    }
  } else {
    if (scrolled) {
      nav.classList.remove("fixHide");
      nav.classList.remove("fixShow");
      scrolled = false;
    }
    prevScrollPos = window.pageYOffset;
  }
}

body {
  height: 300vh;
  margin: 0;
  padding: 0;
}

.nav {
  box-sizing: border-box;
  width: 100vw;
  max-width: 100%;
  height: 20vh;
  margin: 0;
  padding: 0;
  background-color: black;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 250ms;
}

.fixHide {
  position: fixed;
  top: -20vh;
}

.fixShow {
  position: fixed;
  top: 0;
}

.nav p {
  color: white;
  margin: 0;
  padding: 0;
}

.page1, .page2, .page3 {
  box-sizing: border-box;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.page1 {
  border: 1px solid red;
  position: relative;
  z-index: 1;
}

.page2 {
  background-color: blue;
}

.page3 {
  background-color: green;
}

<div class = "nav">
<p>Top nav bar</p>
</div>
<div class = "page1">
</div>
<div class = "page2">
</div>
<div class = "page3">
</div>

scrolled 变量只是检查它是否已经滚动过第一页。我还想让导航栏在重新进入第一页时平滑上升。目的

标签： javascripthtmlcsscss-animationsnavbar