user2326844 user2326844 - 5 months ago 18
CSS Question

How to change the background color of the heading from transparent to paint white?

In the following codes, the header color is transparent. I want to change its color to "#FFF" as I scroll down the page. Please guide me how I can write the relevant js code for it.

Also, could it be done by plain css?



div {
height: 1000px;
width: 100%;
}
#home {
background-color: red;
}
header {
background-color: transparent;
color: ffffff;
height: 100px;
position: fixed;
width: 100%;
top: 0;
z-index: 100;
}

<header>Top Navigation</header>
<div id="home" class="sect"></div>




Answer

Pen Try this. It should help you. You should be doing it with either jquery or plain javascript

$(document).ready(function() {

$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the 
//nav bar to stick.  
console.log($(window).scrollTop())
if ($(window).scrollTop() > 10) {
$('header').css('background-color','#FFF');
 }
 if ($(window).scrollTop() < 10) {
 $('header').css('background-color','transparent');
 }
 });
});
Comments