r4tchet r4tchet - 22 days ago 6
CSS Question

JavaScript to change color of header when scrolling

I'm having some trouble with changing the color of my header from transparent to colored when scrolling.
I can't use jQuery for this, as this is a school assignment and regular JS is a requirement.

So I have this code



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>





And I'm wondering where I'm going wrong. Bear in mind I have little experience with JS, so I guess I have at least one error in the script.

I'm also not sure how to do this in the HTML file. To begin with I only had one header, but I figured I need at least two for the JS to work (transparent and colored).

Any input? :)

Edit: To be clear, what doesn't work is the header does not change color when I scroll. It's just black (the colored one is visible behind the transparent one).

Answer

Basically you have done few mistakes as below.

  1. I changed the header id into header which refers the same in the css and added a default class to the header 'header-transparent'
  2. I changed the selector as class name .header-colored into the css which refers the id as #header-colored before
  3. I added one more css .header-transparent with transparent background color
  4. And finally, set the class with header.className = 'header-colored' instead of your header.classList.add()

I did it with one header and commented the other.

Working sample: You should have a scrollbar to test this

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>