如何让jQuery滚动事件函数对多个元素独立生效？

核心思路是把ID选择器改成类选择器，遍历所有目标元素后对每个元素单独计算滚动位置与可见状态，实现独立控制效果。

修改后的代码 #

$(window).scroll(function() {
  var wH = $(window).height(),
      wS = $(this).scrollTop();
  
  // 遍历所有带.scroll-to类的元素
  $('.scroll-to').each(function() {
    var $element = $(this),
        hT = $element.offset().top,
        hH = $element.outerHeight();
    
    // 判断元素是否进入/离开视口
    if (wS > (hT + hH - wH)) {
      $element.css({ opacity: 1 });
    } else {
      $element.css({ opacity: 0 });
    }
  });
});

关键修改点 #

• 将原代码中的#scroll-to替换为类选择器.scroll-to，确保能选中所有需要控制的元素
• 使用$('.scroll-to').each()遍历每个元素，让每个元素独立执行可见性判断逻辑
• 把窗口高度、滚动距离的计算提到循环外，避免重复计算提升性能
• 将原代码中重复的两个if合并为if-else逻辑，减少冗余判断

对应HTML修改 #

把所有需要实现滚动显示的元素的id="scroll-to"改成class="scroll-to"即可，示例：

<div class="scroll-to">元素1</div>
<div class="scroll-to">元素2</div>
<div class="scroll-to">元素3</div>

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