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


Tags: javascript,css,scroll,header,background-color

Problem :

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>



Solution :

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');
 }
 });
});

    CSS Howto..

    How to concat js/css files and replace in html using gulp?

    popup mask is very very quickly shown

    How to center text inside div in this specific situation? [duplicate]

    How browser renders HTML

    How to build those rectangular with picture and text css bootsrap? [closed]

    how can i add a separator gif between two content areas something like this?

    How to get item to appear on mobile homepage only(wordpress)

    How to implement a webpage with tabs in my case?

    css transform. How to get rotation degree value from “matrix( 0, 1, -1, 0, 0, 0”)?

    How to set a css class to an array of tags on mouse hover in Javascript?

    How to downsize a larger image while showing only one portion of it in CSS (or adding JS to the mix if necessary)?

    How can that view be achieved? Collage / Magazine Products

    How to set a fixed width column with CSS flexbox

    How to disable CSS editor in Netbeans 7

    How to get rid of space between buttons and content/paragraph? (CSS)

    How do I make menu background even with the header in HTML/CSS

    CSS how to align elements inside a div with 2 columns

    How to make expand-collapse different div heights according to device width using css/javascript

    How to make pagination's circle of slider using CSS only?

    How to hide part of css when input is empty?

    How to reveal a Text Field on a form when the Select shows 'Other' using just CSS

    How to target tablet devices with CSS queries

    CSS: How to set image width larger than the container's [closed]

    How to flip background image using CSS?

    How to do fade-in and fade-out with JavaScript and CSS

    How to set img tag vertical center : html + css

    How to make html button look pressed in using css?

    How to use CSS 3D to display child elements perpendicular to parent element?

    CSS how to target 2 attributes?

    How could I center a div that is inside a div? Auto margins aren't working