JavaScript 淡入淡出动画答案

【问题标题】：JavaScript fade-in fade-out animationJavaScript 淡入淡出动画
【发布时间】：2022-11-14 17:35:40
【问题描述】：

window.addEventListener('scroll',function(){
  if(window.pageYOffset > 100)
  {
 document.getElementById('fade').style.opacity=1;
  }
  else
  {
    document.getElementById('fade').style.opacity=0;
  }
});

带有滚动事件或不使用库 API 的 JavaScript 淡入淡出动画，仅使用逻辑

【问题讨论】：

标签： javascript animation scroll fadein fadeout

【解决方案1】：

为了实现这一点，您可以使用 CSS transition 和 opacity 属性与您通过 JS 切换以淡入/淡出元素的类：

window.addEventListener('scroll', function() {
  document.querySelector('#fade').classList.toggle('visible', window.pageYOffset > 100);
});

#fade {
  transition: opacity 0.5s;
  opacity: 0;

  /* only for this demo... */
  position: fixed;
  top: 50px;
}

#fade.visible {
  opacity: 1;
}

div {
  /* only for this demo... */
  height: 1000px;
}

<div>Scroll down</div>
<div id="fade">Lorem ipsum dolor sit</div>

【讨论】：

【解决方案2】：

不，就像我滚动页面时淡入分别应用于每个部分

【讨论】：