スクロール位置によってリストの中身を出し分けたい

https://www.smbc.co.jp/kojin/special/app/

こちらのサイトのように
端末を固定表示しておいて中身の画面のみ、スクロール位置によって出し分けたいです。
上記のサイトと違うところは、端末がページの最後まで続くこと（出し分ける中身が３〜５枚ある）と、
中身が画像ではなくlottieのアニメーションなことです。

<div class="container__img capture" id='phone-move'>
<img class="capture__frame" src="phone_frame.png" alt="">
<ul class='capture__list'>
<li class="capture__item capture__item01">
sec01のアニメーション
</li>
<li class="capture__item capture__item02">
sec02のアニメーション
</li>
<li class="capture__item capture__item03">
sec03のアニメーション
</li>
<li class="capture__item capture__item04">
sec04のアニメーション
</li>
<li class="capture__item capture__item05">
sec05のアニメーション
</li>
</ul>
</div>

<div class="main-container">

<section id="sec_01">
sec_01のコンテンツ
</section>

<section id="sec_02">
sec_02のコンテンツ
</section>

<section id="sec_03">
sec_03のコンテンツ
</section>

<section id="sec_04">
sec_04のコンテンツ
</section>

<section id="sec_05">
sec_05のコンテンツ
</section>

</div>

各sectionの座標を保存しておき、
スクロールがあったときは、jsで都度座標を取得して、現在スクロールしているsectionに合わせて
該当のli（最初は非表示になっている）に表示するクラスを付与すればいいかと思うのですがどう書いたらいいのかわからず。。。
（例えば、スクロール位置が#sec_02のエリアにある場合、capture__item02のliを表示、他のliは非表示）
お知恵を拝借できますと幸いです、よろしくお願いいたします。

Lhankor_Mhy

2020/10/12 08:09

「どのメニューに対応した場所なのか判定し」とのことですが、メニューとはなんですか？　また、どのような判定なのか具体的にお願いします。

退会済みユーザー

2020/10/12 08:31

失礼しました。追記・修正させていただきました。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

現在スクロールしているsectionに合わせて該当のli（最初は非表示になっている）に表示するクラスを付与すればいい

それでしたら、Intersection Observerを使うのが楽だと思います。

サンプル

html
1        <section id="sec_01" data-for="capture__item01"><!-- 属性を追加 -->
2        sec_01のコンテンツ
3        </section>
4        
5        <section id="sec_02" data-for="capture__item02">
6        sec_02のコンテンツ
7        </section>
8        
9        <section id="sec_03" data-for="capture__item03">
10        sec_03のコンテンツ
11        </section>
12        
13        <section id="sec_04" data-for="capture__item04">
14        sec_04のコンテンツ
15        </section>
16        
17        <section id="sec_05" data-for="capture__item05">
18        sec_05のコンテンツ
19        </section>

js
1let observer = new IntersectionObserver((entries, observer) => {
2    entries.forEach(entry => {
3      if (entry.isIntersecting) document.getElementsByClassName(entry.target.dataset["for"])[0].classList.add('show');
4    });
5});
6document.querySelectorAll('.main-container>*').forEach( e => observer.observe(e) );