Question

我有一个带有透明标题的标题，然后当用户滚动它时会变为白色背景。当用户滚动时我需要导航栏文本从白色变为灰色但是无法使其工作。我不确定我的代码或css是否也特别准确。

提前致谢。

标题HTML

<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代码是

.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

提前致谢

Answer 1

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

用户滚动时标题会改变颜色，但我如何更改导航栏文本

1 个答案: