Intersection Observer APIを利用して、要素がウィンドウから外れた場合にコールバックを得たい

実現したいこと

「要素A（body内に1つのみ）が可視領域に入ったら要素Bに対してclassを付与し、可視領域から外れたらclassを外す」ことを実現したいです。

前提

HTML
1<div id="elemB">要素B</div>

CSS
1#elemB {
2	display: none;
3}
4
5.is-active {
6	display: block !important;
7	position:fixed; top: 50vh; right: 0;
8}

.is-activeという要素を可視状態にするユーティリティクラスを用意しており、
以下ように.is-activeの与奪を行うことで、#elemBの表示／非表示を切り替えたいです。

要素Bが画面内に入った場合（上図①→② or ④→③）：.is-activeの付与
要素Bが画面外に出た場合（上図②→① or ③→④）：.is-activeの剥奪

なお、JavaScriptライブラリは使用不可です。

発生している問題

Intersection Observer APIを利用して状態監視を行うようコードを組みました。
optionsにrootMargin: -100% 0px 0px 0pxやthreshold: [0.001, 1]（やけくそ…）を設定してみました。

JavaScript
1const elemB = document.querySelectorAll("#elemB");
2
3const options = {
4  root: null,
5  rootMargin: "-100% 0px 0px 0px",
6  threshold: 0
7};
8const observer = new IntersectionObserver(doWhenIntersect, options);
9elemB.forEach(entries => {
10  observer.observe(entries);
11});
12
13function doWhenIntersect(entries) {
14  entries.forEach(entry => {
15    if (entry.isIntersecting) {
16      activateIndex(entry.target);
17    }
18  });
19}
20
21function activateIndex(element) {
22　（略）
23}