100vh 后滚动时更改导航栏颜色答案

【问题标题】：Changing navbar color on scroll after 100vh100vh 后滚动时更改导航栏颜色
【发布时间】：2021-11-12 18:09:02
【问题描述】：

当我滚动超过 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;
    
}

【问题讨论】：

你的 CSS 是什么？因为我们需要知道回答这个问题，再加上你用 CSS 标签标记了这个，所以我们怎么能只知道你尝试过的 JavaScript 来回答这个问题。所以请添加CSS。
当然，我更新了它。造成误会请见谅
您是否尝试过在 if 条件中使用 window.innerHeight 而不是 document.height？
@ManuelNelson 没关系。
是的，它也不起作用。我有两个部分：都是 100vh；我想给我的导航栏一个背景色：白色；当卷轴到达第二部分，但我不知道如何

标签： css navbar onscroll

【解决方案1】：

要获得滚动位置使用window.scrollY 并获得veiwport 高度使用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;
}

&lt;nav id="header"&gt;&lt;/nav&gt;

【讨论】：