如何利用IntersectionObserver在滚动时修改非目标元素的类名？

问题背景 #

我现有一段代码，通过IntersectionObserver实现滚动到特定位置时，给粘性div切换类名来修改CSS：

const el = document.querySelector(".myElement")
const observer = new IntersectionObserver( 
  ([e]) => e.target.classList.toggle("is-pinned", e.intersectionRatio < 1),
  { threshold: [1] }
);

observer.observe(el); 

现在希望在相同的滚动位置，给下面这个span元素切换额外类名is-pinned-2：

<span class="material-symbols-outlined hide-stuff-arrow">keyboard_double_arrow_up</span>

我考虑过用MutationObserver监听第一个元素的类名变化，但感觉直接在现有代码里加语句更简单，想确认这种方式是否可行，以及最佳实现方案是什么。

最佳解决方案 #

完全可以直接在现有IntersectionObserver的回调函数中添加对目标span的操作，这是最简洁高效的方式——既复用了同一个滚动触发逻辑，保证两个元素的类名切换完全同步，又避免了额外的监听开销。

修改后的代码如下：

const el = document.querySelector(".myElement");
// 提前获取目标span元素，避免每次回调重复查询DOM
const arrowSpan = document.querySelector(".hide-stuff-arrow");

const observer = new IntersectionObserver( 
  ([e]) => {
    // 原有的.myElement类名切换逻辑
    e.target.classList.toggle("is-pinned", e.intersectionRatio < 1);
    // 新增的span类名切换逻辑，触发条件与上方完全一致
    arrowSpan.classList.toggle("is-pinned-2", e.intersectionRatio < 1);
  },
  { threshold: [1] }
);

observer.observe(el); 

关键说明 #

• 提前获取arrowSpan元素，不要在回调内重复调用querySelector，减少DOM查询的性能消耗
• 两个元素共用同一个判断条件e.intersectionRatio < 1，确保它们在完全相同的滚动位置触发状态变化
• 相比MutationObserver，这种方式代码更简洁、逻辑更直观，没有额外的监听层级，性能更优

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