jQuery滚动动画函数仅作用于首个.slide-up元素，如何适配全部同类元素？

问题原因 #

你的两段代码都只在页面加载完成时执行了一次位置检测，没有绑定滚动事件，所以只有页面初始状态下符合条件的第一个元素会被添加active类，滚动过程中不会重新检测其他元素的位置变化。另外第二段代码还存在两个错误：

• 选择器$('slide-up')缺少类选择器的.，变成了选择<slide-up>标签而非类元素
• 内部嵌套了querySelectorAll循环，完全冗余，没必要在each遍历里再重复获取所有元素

正确解决方案 #

下面是结合jQuery的优化写法，绑定滚动事件并加入防抖处理（避免滚动时频繁触发函数影响性能）：

jQuery(document).ready(function ($) {
  // 防抖函数：限制函数执行频率
  function debounce(func, delay) {
    let timer;
    return function() {
      clearTimeout(timer);
      timer = setTimeout(func, delay);
    };
  }

  // 检测所有.slide-up元素的位置并更新类名
  function updateSlideUpStatus() {
    const windowHeight = $(window).height();
    const visibleThreshold = 140; // 元素可见阈值

    $('.slide-up').each(function() {
      // 计算元素顶部到视口顶部的距离
      const elementTopToViewport = $(this).offset().top - $(window).scrollTop();
      
      if (elementTopToViewport < windowHeight - visibleThreshold) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    });
  }

  // 页面加载完成后先执行一次检测
  updateSlideUpStatus();
  // 绑定滚动事件，用防抖优化性能
  $(window).on('scroll', debounce(updateSlideUpStatus, 50));
});

代码说明 #

1. 防抖函数：滚动时会频繁触发事件，防抖函数能确保只有在滚动停止50毫秒后才执行检测，减少不必要的计算
2. 位置计算：用$(this).offset().top - $(window).scrollTop()准确获取元素顶部相对于视口顶部的距离，替代原生的getBoundingClientRect()（jQuery写法更简洁统一）
3. 事件绑定：同时在页面加载和滚动时触发检测，确保初始可见元素和滚动过程中进入视口的元素都能正确添加/移除active类

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