基于原生JavaScript的滚动触发淡入淡出动画实现方案（无依赖库）

无需依赖任何第三方库，仅通过原生逻辑即可实现滚动触发的元素淡入淡出效果。

实现代码 #

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

逻辑说明 #

• 监听页面的scroll滚动事件
• 通过window.pageYOffset获取当前页面垂直滚动的距离
• 当滚动距离超过100px时，将id为fade的元素透明度设置为1（完全显示）
• 当滚动距离小于等于100px时，将该元素透明度设置为0（完全隐藏）

内容的提问来源于stack exchange，提问作者engr. hasnat