header changes colour when user scrolls but how do i change the nav bar text also

Question

I have a header that has a transparent header and then when the user scrolls it changes to a white background. I need the nav bar text to change from white to grey when user scrolls as well but cannot get this to work. I'm not sure my code or css is particularly accurate either.

Thanks in advance.

Header HTML is

<div class="header">
<div class="topbar"></div>
<div class="sitelogo"></div>
<nav id="navigation">
<ul>
<li id="twitter"><a href="http://www.twitter.com/iamdanmorris"><em>Twitter</em></a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Home</a></li>
</ul>
</nav>
<div style="clear:both;"></div>

css code is

.header.active {
background: #fff;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0;
z-index: 10000;
transition: all 0.2s ease-in-out;
height: auto;
background-color:transparent;  
text-align: center;
line-height: 40px;

}

#navigation {
width:400px;
}

#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
float:left;
text-align:center;
}

#navigation ul a {
display: block;
width: 50px;
height: 18px;
float:left;

}

#navigation ul a em {
display: none;
width:50px;
}

#navigation ul li {
float: right;
height: 18px;
}


#navigation ul #twitter {
background-image:url(../images/twitter_sprite_small.png);
display: block;
width:18px;
float:right;
margin-left:20px;
opacity:0.4;
background-repeat:no-repeat;

}


#navigation ul #twitter:hover {
background-image:url(../images/twitter_sprite_small.png);
display: block;
background-position: 0px -18px;
background-repeat:no-repeat;
}

nav {

float:right;
margin-top: 40px;
margin-right:78px;
}

nav a {

display:inline-block;
margin-left:20px;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 17px;
color: #676767;
text-decoration:none;
float:right;

}


nav a:hover {

display:inline-block;
margin-left:20px;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 17px;
color: #0171bd;
text-decoration:none;

}

JQuery

$(window).on("scroll", function() {
if($(window).scrollTop() > 1) {
    $(".header").addClass("active");
} else {
    //remove the background property so it comes transparent again (defined in     your css)
   $(".header").removeClass("active");
}
});// JavaScript Document

Thanks in advance

Answer 1

.header.active #navigation ul a{
  color: grey; 
}