同data-id的Content进入视口时，为对应Media添加Active类（优化代码）

问题背景 #

页面中.content和.media元素通过相同的data-id属性关联，.media设置为sticky定位。需求是当某个.content进入视口时，给对应data-id的.media添加active类。最初的实现是逐个判断每个data-id，导致代码大量重复，需要优化。

优化方案 #

推荐使用IntersectionObserver API实现，它比传统的滚动监听性能更优，且能批量处理所有目标元素，彻底消除重复代码。

步骤1：HTML结构示例

<!-- 内容区块 -->
<div class="content" data-id="section-1">第一部分内容</div>
<div class="content" data-id="section-2">第二部分内容</div>
<div class="content" data-id="section-3">第三部分内容</div>

<!-- 关联的媒体区块 -->
<div class="media" data-id="section-1">媒体区块1</div>
<div class="media" data-id="section-2">媒体区块2</div>
<div class="media" data-id="section-3">媒体区块3</div>

步骤2：优化后的jQuery代码

// 配置观察者参数：可根据需求调整触发阈值
const observerConfig = {
  root: null, // 以浏览器视口为检测根容器
  rootMargin: '0px',
  threshold: 0.3 // 当元素30%进入视口时触发回调
};

// 创建观察者实例
const sectionObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 获取当前.content的data-id
    const targetId = $(entry.target).data('id');
    // 找到对应data-id的.media元素
    const targetMedia = $(`.media[data-id="${targetId}"]`);

    if (entry.isIntersecting) {
      // 先移除所有.media的active类，再给当前目标添加
      $('.media').removeClass('active');
      targetMedia.addClass('active');
    }
    // 可选：如果元素完全离开视口时需要移除active类，取消下面注释
    // else {
    //   targetMedia.removeClass('active');
    // }
  });
}, observerConfig);

// 批量给所有.content元素绑定观察者
$('.content').each((_, el) => {
  sectionObserver.observe(el);
});

方案优势 #

1. 无重复代码：不管新增多少个.content和.media对，都不需要额外编写判断逻辑，自动批量处理。
2. 性能更优：IntersectionObserver由浏览器原生优化，不会在滚动时频繁触发回调，仅在元素进入/离开视口时执行。
3. 扩展性强：后续新增区块只需保持data-id一致，无需修改JS代码。

兼容旧浏览器的备选方案（滚动监听） #

如果需要兼容不支持IntersectionObserver的旧浏览器，可以用优化后的滚动监听逻辑，同样避免重复代码：

$(window).on('scroll', () => {
  $('.content').each((_, el) => {
    const $content = $(el);
    const contentId = $content.data('id');
    const $targetMedia = $(`.media[data-id="${contentId}"]`);

    // 判断元素是否进入视口
    const contentTop = $content.offset().top;
    const contentBottom = contentTop + $content.outerHeight();
    const viewportTop = $(window).scrollTop();
    const viewportBottom = viewportTop + $(window).height();

    if (contentBottom > viewportTop && contentTop < viewportBottom) {
      $('.media').removeClass('active');
      $targetMedia.addClass('active');
    }
  });
});

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