基于JavaScript实现滚动添加Active类的问题排查

你的代码主要有三个问题，修复后就能实现需求：

问题点说明 #

• 判断条件搞反了：原JS里window.scrollY < window.innerHeight是在还没滚出第一屏时就加类，和你要的"滚动到第二页再触发"正好相反，应该改成window.scrollY >= window.innerHeight。
• 类名不匹配：JS里加的是fade-in类，但CSS里写的是fade_in（下划线 vs 短横），浏览器识别不了，得统一类名。
• 缺少反向逻辑：滚动回第一页时没移除激活类，导致元素一直保持显示状态，需要加else分支处理。

修复后的完整代码 #

JavaScript #

window.addEventListener('scroll', function() {
  let fadeText = document.querySelector('.fade');
  // 当滚动距离超过一屏高度（进入第二页）时添加类，否则移除
  if (window.scrollY >= window.innerHeight) {
    fadeText.classList.add('fade-in');
  } else {
    fadeText.classList.remove('fade-in');
  }
});

CSS #

.section {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
}

.fade {
  font-size: 5em;
  transform: translateY(100%);
  color: red;
  opacity: 0;
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

/* 把下划线改成短横，和JS里的类名统一 */
.fade-in {
  opacity: 1;
  transform: translateY(0%);
}

HTML #

<div class="section">1</div>
<div class="section">
  <h1 class="fade">ELEMENTS</h1>
</div>

另外合并了重复的.section样式，避免代码冗余。

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