滚动时淡入/淡出背景答案

【问题标题】：Fade background in/out on scroll滚动时淡入/淡出背景
【发布时间】：2018-06-28 22:31:59
【问题描述】：

最终项目将是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");
    }
});

【问题讨论】：

我认为问题出在up类中的transform: scale(1,0);。也许应该是transform: scale(1,1);？
@git-e-up 这几乎可以工作，但现在由于某种原因在页面加载时初始淡出。
嗯，是的，那是因为您从加载的 up 类开始。您可能需要使您的 js 更具体或在 html 中拉出 up 类并从 1px 开始：if (scroll >= 1)。不完全确定您希望它的外观。

标签： javascript jquery css css-selectors

【解决方案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>

如果有，希望对你有帮助

【讨论】：