javascript - 在滚动条上淡入/淡出背景

Question

最终元素将是background-image，这个测试是在background-color上进行的。

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

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>

如果是，希望对你有帮助