滚动时更改标题颜色的JavaScript

Question

我在滚动时将页眉的颜色从透明更改为彩色时遇到了一些问题。我不能为此使用 jQuery，因为这是一项学校作业，需要使用常规 JS。

所以我有这段代码

var header = document.getElementById('header');
window.onscroll = function () { 
    "use strict";
    if (document.body.scrollTop >= 200 ) {
        header.classList.add("header-colored");
        header.classList.remove("header-transparent");
    } 
    else {
        header.classList.add("header-transparent");
        header.classList.remove("header-colored");
    }
};

#header {
    position: fixed;
    height: 100px;
    width: 100%;
}

#header-colored {
    background-color: black;
    position: fixed;
    height: 100px;
    width: 100%;
}

<header id="header-transparent">
  <ul id="navbar">
    <li>home</li>
    <li>business</li>
    <li>technical</li>
    <li>about us</li>
    </ul>
  </header>

<header id="header-colored">
  <ul id="navbar">
    <li>home</li>
    <li>business</li>
    <li>technical</li>
    <li>about us</li>
    </ul>
  </header>

我想知道我哪里出错了。请记住，我对 JS 的经验很少，所以我想脚本中至少有一个错误。

我也不确定如何在 HTML 文件中执行此操作。一开始我只有一个标题，但我想我至少需要两个标题才能让 JS 工作(透明的和彩色的)。

有任何输入吗？ :)

编辑:要清楚，不起作用的是当我滚动时标题不会改变颜色。它只是黑色的(彩色的在透明的后面可见)。

Answer 1

基本上你犯了以下几个错误。

1. 我将 header ID 更改为 header，它在css 并在标题“header-transparent”中添加了默认类
2. 我将选择器作为类名 .header-colored 更改为 css将 id 引用为 #header-colored before
3. 我又添加了一个 css .header-transparent 透明背景色
4. 最后，使用 header.className = 设置类
'header-colored' 而不是您的 header.classList.add()

我用一个标题完成了它并评论了另一个。

工作示例:你应该有一个滚动条来测试这个

var header = document.getElementById('header');
window.onscroll = function () { 
    "use strict";
    if (document.body.scrollTop >= 200 ) {
        header.className = 'header-colored';
    } 
    else {
        header.className = 'header-transparent';
    }
};

#header {
    position: fixed;
    height: 100px;
    width: 100%;
}

.header-transparent {
    background-color: transparent;
}

.header-colored {
    background-color: black;
}

<header id="header" class="header-transparent">
  <ul id="navbar">
    <li>home</li>
    <li>business</li>
    <li>technical</li>
    <li>about us</li>
    </ul>
  </header>

<!--<header id="header-colored">
  <ul id="navbar">
    <li>home</li>
    <li>business</li>
    <li>technical</li>
    <li>about us</li>
    </ul>
  </header>-->
<div>
  More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content More content
</div>