如何根据页面是否滚动至顶部动态切换HTML元素的类？

没问题，这事儿用JavaScript监听滚动事件就能轻松搞定！我给你写个完整的实现方案，完全匹配你给出的示例需求：

步骤1：基础的CSS和HTML结构 #

先把你提供的基础代码整理好，确保样式和元素都到位：

.red { color: red; }
.blue { color: blue; }

<!-- 用多个br模拟页面高度，方便测试滚动效果 -->
<br><br><br><br><br><br><br><br><br><br>
<p id="changeme" class="red">Text that changes color on scroll</p>
<br><br><br><br><br><br><br><br><br><br>

步骤2：核心JavaScript实现 #

接下来写关键的JS逻辑，思路很简单：监听页面的滚动事件，判断当前滚动距离是否为0（也就是在页面顶部），然后切换对应的类：

// 获取需要切换类的目标元素
const targetElement = document.getElementById('changeme');

// 定义滚动监听的处理函数
function handleScroll() {
  // 判断是否处于页面顶部（scrollY是当前滚动的垂直像素距离）
  if (window.scrollY === 0) {
    // 在顶部：移除blue类，添加red类
    targetElement.classList.remove('blue');
    targetElement.classList.add('red');
  } else {
    // 不在顶部：移除red类，添加blue类
    targetElement.classList.remove('red');
    targetElement.classList.add('blue');
  }
}

// 给window绑定滚动事件监听
window.addEventListener('scroll', handleScroll);

// 可选：页面加载时执行一次，确保初始状态正确
handleScroll();

额外优化（可选） #

如果页面滚动比较频繁，滚动事件会高频触发，可能带来微小的性能损耗。可以加个防抖函数来减少函数执行次数，让逻辑在滚动停止后再执行：

// 防抖函数封装：控制函数在指定延迟后执行
function debounce(func, delay = 100) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// 用防抖后的函数替换原监听函数
window.addEventListener('scroll', debounce(handleScroll));

原理说明 #

• window.scrollY：获取当前页面垂直滚动的像素距离，值为0时代表处于页面顶部。
• element.classList.add()/remove()：安全地操作元素的CSS类，不会重复添加同一类名，也不会误删不存在的类。
• 滚动事件监听：每次页面滚动时都会触发处理函数，实时判断并切换元素的类名，实现动态样式变化。

这样就能完美实现你想要的效果：页面在顶部时文字为红色，滚动离开顶部后自动变成蓝色，回到顶部又恢复红色～

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