У меня возникли проблемы с изменением цвета моего заголовка от прозрачного до цветного при прокрутке. Я не могу использовать jQuery для этого, так как это школьное задание и регулярное JS - это требование.JavaScript для изменения цвета заголовка при прокрутке
Так что у меня этот код
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 (прозрачный и цветной).
Любой вход? :)
Редактировать: Чтобы быть ясным, что не работает, заголовок не меняет цвет при прокрутке. Он просто черный (цветная видимая за прозрачной).
Для того, чтобы сказать, где вы могли бы идти неправильно, требует, чтобы мы знали, что именно происходит не так, что не работает? Пожалуйста, прочитайте «* [ask] *» рекомендации, а затем отредактируйте свой вопрос. –
Кроме того, ваш пример немного шикарный, поскольку он просто добавляет два '' -tags, не предоставляет нам фактическую прокручиваемую страницу, чтобы мы могли видеть, что происходит и т. Д. –
junkfoodjunkie
Извините, это мой первый раз размещение здесь. Я понял, что два тега 'header' будут плохой идеей. Изменит его. Сейчас у меня нет прокручиваемой страницы, так как у меня есть другие проблемы, которые я пытаюсь выяснить. Спасибо, что! – r4tchet