如何在HTML中通过滚动触发CSS淡入动画？问题排查与解决

原代码存在的问题 #

1. 无依赖却用jQuery：代码里写了$(window).scroll()但没引入jQuery库，而且你明确说要用原生实现，完全没必要依赖jQuery
2. 元素选择错误：用document.getElementById("anim")找元素，但目标元素是class="anim"，不是id，选择器不匹配
3. 逻辑完全失效：不管滚动距离是否超过100，都执行addClass("fade")，等于没做条件判断，动画自然不会按预期触发
4. 缺少动画样式：没给fade类定义淡入的CSS过渡/动画，就算加了类也看不到任何效果

修复后的实现方案 #

步骤1：添加CSS基础样式 #

先定义元素初始透明状态，以及淡入后的状态，加上过渡效果让动画更平滑：

.anim {
  opacity: 0;
  transition: opacity 0.8s ease-in-out; /* 过渡时长可根据需求调整 */
}

.fade {
  opacity: 1;
}

步骤2：修正JavaScript逻辑 #

用原生JS实现滚动监听，按条件动态添加/移除类：

// 获取目标元素
const animEl = document.querySelector('.anim');

// 滚动监听函数
function handleScroll() {
  // 获取当前滚动距离
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 设置触发阈值，这里是滚动超过100px时触发淡入
  if (scrollTop > 100) {
    animEl.classList.add('fade');
  } else {
    animEl.classList.remove('fade'); // 滚动回顶部时恢复透明
  }
}

// 绑定滚动事件
window.addEventListener('scroll', handleScroll);
// 页面加载时先执行一次，避免初始状态异常
handleScroll();

完整可运行代码示例 #

<html>
<head>
  <style>
    /* 给页面设置足够高度方便滚动测试 */
    body {
      height: 1500px;
      padding-top: 200px;
    }

    .anim {
      opacity: 0;
      transition: opacity 0.8s ease-in-out;
    }

    .fade {
      opacity: 1;
    }
  </style>
</head>
<body>
    <h1 class="anim">hi</h1>
</body>
<script>
  const animEl = document.querySelector('.anim');

  function handleScroll() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop > 100) {
      animEl.classList.add('fade');
    } else {
      animEl.classList.remove('fade');
    }
  }

  window.addEventListener('scroll', handleScroll);
  handleScroll();
</script>
</html>

进阶优化（可选） #

如果不想用固定滚动距离，而是判断元素是否进入视口再触发动画，可以替换判断逻辑：

function handleScroll() {
  const rect = animEl.getBoundingClientRect();
  // 判断元素是否进入视口（顶部进入或完全在视口内）
  const isInView = rect.top <= window.innerHeight && rect.bottom >= 0;
  if (isInView) {
    animEl.classList.add('fade');
  } else {
    animEl.classList.remove('fade');
  }
}

内容的提问来源于stack exchange，提问作者tjf1