滚动淡入/淡出背景

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> 

如果是，希望对您有所帮助