$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
$( ".background" ).fadeOut();
$("a, h1").addClass("fade");
} else {
$( ".background" ).fadeIn();
$("a, h1").removeClass("fade");
}
});
//Add Class
.fade
color: #BBB
//Main
body
margin: 0
padding: 0
font-family: Helvetica
.header
width: 100%
height: 100px
position: fixed
top: 0px
z-index: 3
.background, .labels
position: absolute
top: 0px
width: 100%
height: 100%
.labels
background-color: transparent
.background
background-color: #0097A7
h1
float: left
padding: 11px 0 0 40px
color: #FFF
.nav
float: right
list-style-type: none
margin-top: 40px
li
display: inline
padding-right: 60px
a
color: #FFF
font-size: 19px
text-decoration: none
.content
width: 100%
height: 5000px
background-color: #FFF
body
.header
.background
.labels
h1 JB
ul.nav
li
a(href="#") Work
li
a(href="#") About Me
li
a(href="#") Contact
.content
尝试使标题从蓝绿色逐渐淡出(有效),同时将文本从白色变为黑色。最终,我将在CSS中添加一个过渡以进行文本更改,但是现在,我正在尝试使addClass工作。
编辑:
我得到它与以下工作:
.fade-in
transition: opacity, 1s, ease
color: #000 !important
.fade-out
transition: opacity, 1s, ease
color: #FFF !important
和
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
$( ".background" ).fadeOut();
$("a, h1").removeClass("fade-out");
$("a, h1").addClass("fade-in");
} else {
$( ".background" ).fadeIn();
$("a, h1").removeClass("fade-in");
$("a, h1").addClass("fade-out");
}
});
感谢您所有的帮助!
最佳答案
试试这个,让我知道是否可行。如果不能,您可以摆弄小提琴吗?我绝对可以解决它,但您的标记显示不正确。
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
$( ".background" ).fadeOut();
$("h1, li a").addClass("fade");
} else {
$( ".background" ).fadeIn();
$("h1, li a").removeClass("fade");
}
});
关于jquery - addClass不起作用。我的选择器不够具体吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28865241/