user2326844 user2326844 - 1 year ago 84
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 Source

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.  
if ($(window).scrollTop() > 10) {
 if ($(window).scrollTop() < 10) {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download