如何使用jQuery实现元素仅在页面滚动时显示、停止滚动时隐藏

原有代码存在的问题 #

• 语法错误：$("document")写法错误，document是全局对象不需要加引号，加引号会匹配标签名为document的不存在元素；同时scroll事件绑定的参数缺了逗号，代码无法正常执行
• 逻辑错误：直接用toggleClass会导致每次滚动事件触发都切换类名，滚动过程中元素会反复闪烁，完全无法实现滚动时显示、停止时隐藏的需求

正确实现方案 #

实现思路：通过定时器判断滚动是否停止，滚动事件触发时立即显示元素，每次滚动都重置定时器，停止滚动指定时长后自动隐藏元素。

JS代码 #

$(document).ready(function() {
  // 定义定时器变量
  let scrollTimer;
  // 监听window的滚动事件，兼容性更好
  $(window).on('scroll', function() {
    // 滚动触发时先清空之前的延时隐藏定时器
    clearTimeout(scrollTimer);
    // 显示目标元素
    $(".infoa").addClass("infob");
    // 设置200毫秒延时，停止滚动200ms后隐藏元素，时长可自行调整
    scrollTimer = setTimeout(function() {
      $(".infoa").removeClass("infob");
    }, 200);
  });
});

CSS代码 #

基础版本和原有逻辑一致，也可参考注释添加过渡效果让展示更自然：

.infoa {
  display: none;
  position: fixed;
  bottom: 20%;
  right: 50px;
  /* 可选优化：替换display控制，添加淡入淡出过渡
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  */
}

.infob {
  display: block;
  /* 对应上面的优化配置
  opacity: 1;
  visibility: visible;
  */
}

HTML代码 #

无需修改，原有结构可正常使用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="infoa">
  <h1>Thanks!</h1>
</div>

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