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.  
if ($(window).scrollTop() > 10) {
 if ($(window).scrollTop() < 10) {

    CSS Howto..

    how can I hide an element inside iFrame using Jquery or CSS

    How we can add a span to a text inside ul, that is outside of li in jquery or css

    How to have multiple borders on div using css

    CSS how to use pseudo-class :not with :nth-child

    How to stop text in div pushing other divs down the page?

    How to do img validation

    How to restore CSS style to its super class

    How to get a zoomed out background image?

    How to remove dot '.' from CSS list-style:decimal [duplicate]

    How with JQuery cause Hover on diffrent element than mouse is currently on top of

    How to access CSS on img tag

    Make image show when screen reaches a certain width (pixels)

    How to animate some parts of an image using CSS?

    How to create CSS3 bounce effect

    how to show one element under the other one?

    How can I make a fluid width, fluid height, fixed header table with jQuery?

    How to make div horizontally and vertically centered without scripting?

    How to create a code block on website

    How to center a span in a div

    How do I use css to make a row of boxes that do not wrap when browser shrinks?

    How to change CSS over selected element only using $(this)

    How to have background color outside of radius border in a tbody in chrome?

    how to make slide animation?

    How to vertically align text inside
  • in a CSS based drop-down menu?
  • jquery - how to queue up a series of css property changes

    My Background image doesn't show up and is not inspected in the browser [closed]

    How to use ViewContext?

    How to make bootstrap row “col-md-4” fullscreen size

    How to separate header from content

    how to read value of style[“display”] property of webcontrol