javascript - 滚动到另一个div时，将NavBar放在顶部(即top:100vh)

让我看看是否可以解释。
我希望将导航栏的位置固定在top：100vh的位置，所以当我向下滚动并在下一个div中输入导航栏时，导航条将停留在顶部，而不是停留在position：fixed top：0开头。我想将其粘贴在100vh-110vh的顶部。

这是一个可以更好解释的绘画图像。据说我只能看到100vh，所以当我滚动到100vh-200vh时。等等



除此之外，当我在页面的某个部分时，我想在导航栏上有一个活动类。例如如果将鼠标悬停在“关于”部分，我希望导航栏的“关于”链接具有“活动”类。

希望您能理解我，我已经明确了。对不起，如果我很困惑。

提前致谢。

最佳答案

基本上，您希望位于页面底部的导航栏设置为position: absolute;和top: 100vh;，这意味着它会停留在该位置并在滚动时更改其位置。

一旦超出了预期的滚动位置，您就希望它停留在顶部。
因此，将此位置设置为position: fixed;和top: 0;，以便它停留在顶部。

另外，仅因为代码片段有效，所以请勿复制粘贴代码，而是尝试了解此处实际发生的情况。

window.addEventListener('scroll', function(){
  if(window.scrollY > window.innerHeight){
    document.getElementById('navbar').classList.add("sticky");
  } else {
    document.getElementById('navbar').classList.remove("sticky");
  }
});

* {
  margin: 0;
  padding: 0;
}
.pageOne {
  min-height: 100vh;
  background: pink;
}

#navbar {
  height: 100px;
  position: absolute;
  width: 100%;
  top: 100vh;
  left: 0;
  background: lightgreen;
  z-index: 2;
}

#navbar.sticky {
  position: fixed;
  top: 0;
}

.pageTwo {
  min-height: 100vh;
  background: orange;
}

.pageThree {
  min-height: 100vh;
  background: purple;
}

<div class="pageOne">Div One</div>
<div id="navbar">Navbar</div>
<div class="pageTwo">Div Two</div>
<div class="pageThree">Div Three</div>
<div class="pageTwo">Div Two</div>
<div class="pageThree">Div Three</div>

关于javascript - 滚动到另一个div时，将NavBar放在顶部(即top:100vh)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52886510/