如何实现滚动至页面顶部时切换不同背景色？

这种效果是JavaScript + CSS结合实现的，核心逻辑是通过JS监听页面滚动状态，根据滚动距离给目标元素切换CSS类，再用CSS定义不同状态下的背景样式。

具体实现步骤： #

1. CSS样式定义：提前写好两种状态的样式，加上过渡动画让切换更平滑：

/* 页面顶部初始状态 */
.header {
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* 滚动后的状态 */
.header.scrolled {
  background-color: #1877f2;
}

2. JavaScript监听滚动：通过scroll事件判断滚动距离，动态切换类名：

const header = document.querySelector('.header');

window.addEventListener('scroll', () => {
  if (window.scrollY > 0) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

补充说明： #

• 过渡动画transition是提升体验的关键，能避免背景色切换过于生硬；
• 这种JS+CSS的方案兼容性好，也方便扩展其他滚动关联的样式变化，是这类交互的主流实现方式。

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