### 実現したいこと Intersection Observer APIを使いスクロール表示切り替えを行いたいと考えております。やりたいこととしてはある一定の場所を通り過ぎたら常に表示されそれより前だと表示されないと言ったものを作りたいです。 ### 該当のソースコード ```html

ここがコンテンツ1です。

ここがコンテンツ2です。ここを通りすぎたり戻ったりしたら表示非表示が切り替わります。

ここがコンテンツ3です。

ここがコンテンツ4です。

固定部分で表示非表示されるコンテンツです。

``` ```css main { position: relative; } div { height: 400px; } .fixed { position: fixed; top: 0; display: none; } .fixed.active { display: block; } ``` ```javascript setDisolay(); function setDisolay() { const disolayObserver = new IntersectionObserver(disolayCallback); const element = document.querySelector(".contents_02"); disolayObserver.observe(element); } function disolayCallback(entries, observer) { entries.forEach(entry => { if(entry.isIntersecting) { document.querySelector(".fixed").classList.add("active"); return; } document.querySelector(".fixed").classList.remove("active"); }); } ``` ### 試したこと上記ですと『コンテンツ2』が表示されている時に上部に固定することは可能かとは思います。ですが今回は『コンテンツ2』を過ぎたら常に表示されるようにさせたいのですが、案としては htmlで指定のコンテンツにclassを付与し setDisolay();内でquerySelectorAllで複数コンテンツを取得し forEachすればできるかとは思いますが、できればclassを付与せずに『コンテンツ2』を過ぎたら常に表示されるようにjsで処理を行いたいのですが可能なのでしょうか？よろしくお願いいたします。