使用jQuery实现滚动触发div显示与隐藏的协同功能求助

嘿，我懂你现在的烦恼——两段代码单独跑都没问题，放一起就“打架”，这种情况在刚接触前端的时候真的超常见😅。咱们直接把两个判断逻辑合并到同一个滚动事件监听里，就能让它们协同工作了。

先给你完整的可运行代码：

$(document).ready(function() { 
  // 提前获取元素，避免每次滚动都重新查询DOM，提升性能
  const $ctaBar = $('.cta-bar');
  const $preFooter = $('#prefooter');
  
  // 计算prefooter的顶部位置（如果元素存在的话）
  let preFooterTop = 0;
  if ($preFooter.length) {
    preFooterTop = $preFooter.offset().top;
  }

  $(document).scroll(function() { 
    const scrollY = $(this).scrollTop();

    // 核心判断逻辑：满足两个条件才显示，否则隐藏
    if (scrollY > 800 && scrollY < preFooterTop) {
      $ctaBar.stop().fadeIn(); // stop()防止滚动时动画卡顿
    } else {
      $ctaBar.stop().fadeOut();
    }
  });
});

关键细节解释： #

• 统一事件监听：把所有滚动相关的判断都放在同一个scroll事件里，避免多个事件监听互相干扰，还能减少DOM查询次数
• 预获取元素：在滚动事件外面先拿到.cta-bar和#prefooter的DOM对象，不用每次滚动都重新查找，提升性能
• 边界条件处理：先判断#prefooter是否存在，避免元素不存在时报错；如果没有这个元素，代码会自动退化成“滚动超过800px显示，否则隐藏”的逻辑
• 动画优化：用stop()方法在执行新动画前停止之前的动画，防止滚动时频繁触发导致的卡顿问题

如果你想直接用show()/hide()而不是渐变动画，只需要把fadeIn()和fadeOut()换成对应的方法就行。

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