在 100vh 后更改滚动条上的导航栏颜色

Question

我想在滚动超过 100vh 时更改导航栏的颜色（当我从一个部分更改为另一个部分时）。我怎样才能做到这一点？我测试了这段代码，但它不起作用。

const myNav = document.getElementById('header');
window.onscroll = function () { 
    "use strict";
    if (document.body.scrollTop > document.height ) {
        myNav.classList.add("scrolled");
    } 
    else {;
        myNav.classList.remove("scrolled");
    }
};

这是CSS:

header {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    transition: 0.2s;
    z-index: 1000;
    display: flex;
    justify-content: center;
}

.scrolled {
    background-color: black;
    z-index: 1;
    
}

Answer 1

要获得滚动位置使用 window.scrollY 并获得视口高度使用 window.innerheight 这样做：

const myNav = document.getElementById('header')

window.onscroll = function() {
  if(window.scrollY > window.innerHeight){
    myNav.classList.add('scrolled')
  }else{
    myNav.classList.remove('scrolled')
  }
}

body{
  min-height: 400vh;
}

nav{
  position:fixed;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background: green;
}

nav.scrolled{
  background: black;
}

<nav id="header"></nav>

在 100vh 后更改滚动条上的导航栏颜色

Changing navbar color on scroll after 100vh

css

navbar

onscroll