如何实现页面滚动时显示Div/添加类，滚动停止后恢复？

当然可以实现这个需求！这是前端开发里挺常见的交互效果，我来给你一步步讲清楚怎么做：

核心思路 #

我们需要监听页面的scroll事件，同时用防抖定时器来判断滚动是否停止：

• 当用户开始滚动时，立刻给目标div添加样式类（或显示它），并重置定时器
• 当滚动停止后（定时器到期没有被重置），就移除样式类（或隐藏它）

完整代码实现 #

1. HTML结构

先定义那个固定在顶部的div：

<div id="topBar">我是顶部固定栏</div>

2. CSS样式

设置默认状态和滚动时的状态：

#topBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  /* 默认未滚动时的样式 */
  background-color: #2196F3;
  color: white;
  transition: background-color 0.3s ease; /* 加个过渡让变化更平滑 */
}

/* 滚动时的样式类 */
#topBar.scrolling {
  background-color: #FF9800; /* 切换成橙色 */
  /* 如果是需要显示/隐藏，就用display: block/none，或者opacity */
}

3. JavaScript逻辑

这是核心部分，用防抖来处理滚动事件：

const topBar = document.getElementById('topBar');
let scrollTimeout;

// 监听滚动事件
window.addEventListener('scroll', () => {
  // 滚动开始时，先清除之前的定时器（防止重复触发）
  clearTimeout(scrollTimeout);
  
  // 给顶部栏添加滚动状态类
  topBar.classList.add('scrolling');
  
  // 设置定时器：如果300ms内没有再次触发滚动，就认为滚动停止了
  scrollTimeout = setTimeout(() => {
    topBar.classList.remove('scrolling');
  }, 300);
});

细节说明 #

• 定时器的300ms可以根据需求调整，比如改成200ms会更灵敏，500ms会更宽松，找到最贴合你产品体验的数值
• 如果你的需求是滚动时显示div，停止时隐藏，只需要把CSS里的默认状态设为display: none，滚动类设为display: block即可
• 防抖处理很重要，因为scroll事件会触发非常频繁，直接操作DOM会影响性能，用定时器可以减少DOM操作的次数

这样就能完美实现你要的效果：页面未滚动时顶部栏是蓝色，滚动过程中切换为橙色，滚动停止后恢复蓝色~

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