在滚动时淡入/淡出背景

Question

最终项目将被background-image，此测试在background-color上。

https://jsfiddle.net/broj3064/17/当你向下滚动时，红色块会淡入，但如果你向上滚动，它不会淡出，它只是消失。

.HTML

<header>
<nav>
<ul>
<li class="up"></li>
</ul>
</nav>
</header>
<div class="content">
</div>

.CSS

header {
display: block;
width: 100%;
position: fixed;
}
nav ul li {
list-style: none;
display: block;
background-color: red;
width: 50px;
height: 50px;
}
nav ul li.up {
}
nav ul li.down {
}
.content {
min-height: 1000px;
}
/* animation */
nav ul li.down {
-webkit-animation: bummer 0.5s;
animation: bummer 0.5s;
-webkit-transform: scale(0,0); 
transform: scale(0,0);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes bummer {
100% {
-webkit-transform: scale(1); 
}
}
@keyframes bummer{
100% {
transform: scale(1); 
}
}
nav ul li.up {
-webkit-animation: bummer2 0.5s;
animation: bummer2 0.5s;
-webkit-transform: scale(1,0); 
transform: scale(1,0);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes bummer2 {
100% {
-webkit-transform: scale(0); 
}
}
@keyframes bummer2{
100% {
transform: scale(0); 
}
}

jQuery

$(window).scroll(function() {    
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$("li").addClass("down").removeClass("up");
}
else {
$("li").removeClass("down").addClass("up");
}
});

Answer 1

这是你需要的吗？

$(window).scroll(function() {
var scroll = $(window).scrollTop();

$("li").toggleClass('show',(scroll >= 50)); /* toggleClass add or remove a class in a div if you pass a boolean to it, in this case, when scroll is greater than 50 wich its true adds the show class to the selector, in this case a $('li'), otherwise it remove the class */
});

header {
display: block;
width: 100%;
position: fixed;
}
nav ul li {
list-style: none;
display: block;
background-color: red;
width: 50px;
height: 50px;
transition:all 400ms; /* This line create an animated transition if any property is overwritten */
transform:scale(0);
}
nav ul li.show {
/*Due to css specificity, adding a second class to an item, it overwrite its value, triggering the transition property to animate between old and new value*/
transform:scale(1);
}
.content {
min-height: 1000px;
}
/* animation */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<ul>
<li></li>
</ul>
</nav>
</header>
<div class="content">
</div>

如果是，希望它有所帮助