jQuery实现滚动隐藏固定元素内Banner，回到顶部恢复显示的问题

数据老陈

2026-7-27

针对你遇到的问题，这里提供一个优化后的jQuery实现方案，解决空白残留、动画卡顿和恢复失效的问题：

核心思路

用节流函数减少scroll事件触发频率，避免动画队列堆积导致卡顿
结合CSS transform 和 opacity 实现平滑过渡，比修改height性能更好，不会留下空白
仅在滚动状态变化时触发一次动画，避免重复执行

代码实现

/* Banner基础样式，确保过渡平滑 */
.callout-banner {
  position: relative;
  /* 初始显示状态 */
  opacity: 1;
  transform: translateY(0);
  /* 配置过渡动画参数 */
  transition: all 0.3s ease;
  /* 适配固定父容器，确保布局正常 */
}

/* Banner隐藏状态的样式 */
.callout-banner.hidden {
  opacity: 0;
  transform: translateY(-100%);
  /* 隐藏后不占用空间 */
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

$(function() {
  var $banner = $('.callout-banner');
  var isHidden = false;
  var scrollTimeout;

  // 节流处理scroll事件，避免频繁触发
  $(window).scroll(function() {
    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(function() {
      var scrollTop = $(window).scrollTop();
      
      // 滚动离开顶部且Banner未隐藏时，执行隐藏
      if (scrollTop > 0 && !isHidden) {
        $banner.addClass('hidden');
        isHidden = true;
      } 
      // 滚动回顶部且Banner已隐藏时，执行显示
      else if (scrollTop === 0 && isHidden) {
        $banner.removeClass('hidden');
        isHidden = false;
      }
    }, 50); // 50ms节流间隔，可根据需求调整
  });
});