滚动触发渐显效果失效：classList添加show类无响应

问题根源 #

你的代码存在几处关键错误，导致show类无法正确添加到目标元素：

• 类选择器语法错误：document.querySelectorAll("fadeIn")会查找名为<fadeIn>的标签，正确写法是.fadeIn，才能选中带有fadeIn类的元素。
• 滚动事件名拼写错误：scoll应为scroll，拼写错误导致滚动操作无法触发scrollFade函数。
• 循环变量误用：forEach循环中你一直操作全局的fade（NodeList集合），而非当前迭代的单个元素fades，导致无法获取单个元素的位置、修改它的类名。
• CSS逻辑混乱：初始给.fadeIn绑定动画会让页面加载时直接执行动画，且@keyframes里的5100%是笔误；.show类的display:block完全多余——你的元素本身就是块级元素。

修正后的完整代码 #

JavaScript

const fadeElements = document.querySelectorAll(".fadeIn");

window.addEventListener("scroll", scrollFade);

// 页面加载时先执行一次，处理已经在视口中的元素
scrollFade();

function scrollFade() {
  // 设置触发点为视口高度的80%，元素进入视口80%区域时触发渐显
  const triggerPoint = window.innerHeight * 0.8;

  fadeElements.forEach(element => {
    const elementTop = element.getBoundingClientRect().top;

    if (elementTop < triggerPoint) {
      element.classList.add("show");
    } else {
      element.classList.remove("show");
    }
  });
}

CSS（推荐用过渡实现，简洁灵活）

/* 初始状态：透明+下移100px */
.fadeIn {
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.6s ease-out;
}

/* 触发后状态：完全显示+复位位置 */
.fadeIn.show {
  opacity: 1;
  transform: translateY(0);
}

如果坚持要用@keyframes动画，替换成这段CSS：

.fadeIn {
  opacity: 0;
  transform: translateY(100px);
}

.fadeIn.show {
  animation: fadetop 0.6s 1 both;
}

@keyframes fadetop {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

HTML（无需修改）

<div class="container">
  <div class="row">
    <div class="col fadeIn" id="IT">
      <img src="/images/PeopleImages.com-ID2554265.jpg" alt="">
      <div class="banner animated">
        <img src="/images/left_arrow_icon.png" alt="">
        <h4>IT Solutions</h4>
      </div>
    </div>
    <div class="col fadeIn" id="cctv-camera">
      hello
      <div class="banner" id="cctv">
        <img src="/images/right_arrow_icon.png" id ="right-arrow" alt="">
        <h4>CCTV Monitoring</h4>
      </div>
    </div>
    <div class="col fadeIn" id="server">
      <img src="/images/AdobeStock_90603827-scaled.jpeg" alt="">
      <div class="banner" id="database">
        <img src="/images/left_arrow_icon.png" alt="">
        <h4>Client Database Management</h4>
      </div>
    </div>
    <div class="col fadeIn" id="control-room">
      <img src="/images/cctv-camera-traffic-security-room.jpg" alt="">
    </div>
  </div>
</div>

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