Intersection Observer API発火させたい要素が2つあるときのJSの書き方を知りたい

前提・実現したいこと

Intersection Observer APIで発火させたい要素が2つあるときのJSの書き方を知りたい

現在ポートフォリオサイトを制作しているのですが、スクロールで要素をふわっと表示させるにあたって、Intersection Observer APIというものが便利そうだなと思い導入することにしました。

記事を参考にしつつ、スクロールをふわっと表示させることには成功したのですが、、

ついでにスクロールに合わせてヘッダーメニューに色を付けるアニメーションも実装したいと思いました。
こちらのICS Mediaさんの執筆されている記事を参考に実装したいと考えています
https://ics.media/entry/190902/

つまり、実現したい要件としましては
######スクロールに合わせてふわっとコンテンツを表示させる＋スクロールに合わせてヘッダーメニューの色を変える

この2つの要件をintersection Observer APIで実現できればと思っています。

発生している問題・エラーメッセージ

ここからが問題なのですが、
発火を制御したい要素が二種類ある場合、Intersection Observer APIのJSの記法としてどんな風に書けばいいかわからず詰んでいます。

おそらく、JSの基本的な概念をしっかりと理解していれば困らないポイントだと思うのですが、JSに疎いためどうしたらいいかわからずです。
現状以下のようなコードです。（これだと両方発火しない。どちらかを消す必要がある）
重複した宣言をしているのがよくないと思うのですが、まとめて記述する方法が分かりません。。

初歩的な質問でお恥ずかしい限りですが、JSに知見のある諸兄の皆様に解決方法をご教示できればと思い質問させて頂きました！
大変拙い説明で恐縮ですが、何卒よろしくお願いします。

エラーメッセージ

該当のソースコード

javascript
1
2//1つ目の要件
3// ヘッダーメニューの色変更
4//columnが各セクションのwrapper
5const boxes = document.querySelectorAll(".column");
6
7const options = {
8 root: null,
9 rootMargin: "-50% 0px",
10 threshold: 0
11};
12
13const observer = new IntersectionObserver(doWhenIntersect, options);
14boxes.forEach(box => {
15 observer.observe(box);
16});
17
18function doWhenIntersect(entries) {
19 // 交差検知をしたもののなかで、isIntersectingがtrueのDOMを色を変える関数に渡す
20 entries.forEach(entry => {
21   if (entry.isIntersecting) {
22     activateIndex(entry.target);
23   }
24 });
25}
26
27
28
29// @param entries
30
31function activateIndex(element) {
32  // すでにアクティブになっている目次を選択
33  const currentActiveIndex = document.querySelector("#columnList .active");
34  // すでにアクティブになっているものが0個の時（=null）以外は、activeクラスを除去
35  if (currentActiveIndex !== null) {
36    currentActiveIndex.classList.remove("active");
37  }
38  // 引数で渡されたDOMが飛び先のaタグを選択し、activeクラスを付与
39  const newActiveIndex = document.querySelector(`a[href='#${element.id}']`);
40  newActiveIndex.classList.add("active");
41}
42
43//2つ目の要件
44//スクロールに合わせてコンテンツをふわっと表示
45const target = document.querySelectorAll('.js_column');
46
47const options = {
48  root: null,
49  rootMargin: "-50% 0px",
50  threshold: 0
51 };
52
53const observer = new IntersectionObserver((changes) => {
54  if(changes[0].isIntersecting){
55    changes[0].target.classList.add('is-actives');
56  } else {
57    changes[0].target.classList.remove('is-actives');
58  }
59});
60
61//対象となる要素が複数かどうかを判定
62for(let i = 0; i < target.length; i++){
63  observer.observe(target[i]);
64}