滚动到另一个div时，将NavBar放在顶部（即top：100vh）

Question

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

这是一个绘画图像，可以更好地说明。大概我只能看到100vh，所以当我滚动到100vh-200vh ..等等

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

我希望你能理解我，我已经明确了。抱歉，如果我很困惑。

谢谢。

Answer 1

在页面上添加滚动事件

并在页面滚动顶部为<100vh = position :static时设置导航栏样式window.innerHeight

然后检查页面顶部滚动> 100vh

将导航的样式设置为top :0和position : fixed

为显示动画添加类动画

window.onscroll = () => {
  let c = window.scrollY;

  if (c > window.innerHeight) {
    document.getElementById("nav").className = "fixed-nav";
  } else {
    document.getElementById("nav").className = "";
  }
}

div {
  background-color: blue;
}

nav {
  background-color: red;
}

.fixed-nav {
  position: fixed;
  width: 100%;
  top: 0;
}

<div style="height:100vh"></div>
<nav id="nav" style="height:100px"></nav>
<div style="height:100vh"></div>
<div style="height:100vh"></div>

Answer 2

基本上，您希望位于页面底部的导航栏设置为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>