javascriptについてお詳しいプログラマーの方、ご教授いただけませんでしょうか…

はじめまして。こんにちは。
translateZを使用したサイト制作についてお伺いさせてください。

・今、どのコンテンツが表示されているかをユーザーに認識させるために
スクロールによって、コンテンツが表示されたら、一致するナビにクラスを付与し、
CSSでナビに下線をつけたいです。

・パララックスにするために、該当のコンテンツが表示された際に
jsを発動させ、そのタグにclassを付与したいです

色々調べてはいるのですが、全く分からず行き詰まっております…
現在書いているjsは以下となっております。
こちらに付け加える書き方でご教授いただけると助かります。

javascriptについてお詳しいプログラマーの方がいらっしゃれば、アドバイスいただけませんでしょうか。

大変お手数おかけしますが、よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>Document</title>
6  <link rel="stylesheet" href="sample_3.css">
7</head>
8<body>
9  <nav>
10    <ul>
11      <li><a href="#section-1">セクション1</a></li>
12      <li><a href="#section-2">セクション2</a></li>
13      <li><a href="#section-3">セクション3</a></li>
14      <li><a href="#section-4">セクション4</a></li>
15      <li><a href="#section-5">セクション5</a></li>
16    </ul>
17  </nav>
18  <div class="base">
19    <div id="scaler" class="scaler">
20      <section id="section-1" class="section section-1" data-z="0">
21        <p class="text">コンテンツ</p>
22      </section>
23      <section id="section-2" class="section section-2" data-z="5">
24        <p class="text">コンテンツ</p>
25      </section>
26      <section id="section-3" class="section section-3" data-z="10">
27        <p class="text">コンテンツ</p>
28      </section>
29      <section id="section-4" class="section section-4" data-z="15">
30        <p class="text">コンテンツ</p>
31      </section>
32      <section id="section-5" class="section section-5" data-z="20">
33        <p class="text">コンテンツ</p>
34      </section>
35    </div>
36  </div>
37  <div id="scroll" class="scroll"></div>
38  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
39  <script type="text/javascript" src="sample_3.js"></script>
40</body>
41</html>

CSS
1 body {
2  margin: 0;
3  padding: 0;
4}
5nav {
6  width: 100%;
7  padding: 20px;
8  box-sizing: border-box;
9  position: fixed;
10  z-index: 9;
11}
12nav ul {
13  list-style: none;
14  width: 1000px;
15  margin: auto;
16  padding: 0;
17}
18nav li {
19  display: inline-block;
20  margin: 0 5px;
21}
22.base {
23  width: 1000px;
24  height: 500px;
25  margin: auto;
26  border: 2px solid #000;
27  position: fixed;
28  top: 50%;
29  left: 50%;
30  transform: translate(-50%, -50%);
31  perspective: 1px;
32}
33.scaler {
34  width: 100%;
35  height: 100%;
36  transform-style: preserve-3d;
37  transform: translateZ(0);
38  transition: all .5s ease;
39}
40.section {
41  width: 100%;
42  height: 100%;
43  box-sizing: border-box;
44  padding: 30px;
45  background: #f00;
46  position: absolute;
47  top: 0;
48  left: 0;
49}
50.section-1 {
51  background: #f00;
52}
53.section-2 {
54  background: #0f0;
55}
56.section-3 {
57  background: #00f;
58}
59.section-4 {
60  background: #ff0;
61}
62.section-5 {
63  background: #0ff;
64}
65.scroll {
66  visibility: hidden;
67  z-index: -1;
68}

js
1var scrollElm = (function() {
2  if('scrollingElement' in document) {
3    return document.scrollingElement;
4  }
5  if(navigator.userAgent.indexOf('WebKit') != -1) {
6    return document.body;
7  }
8  return document.documentElement;
9})();
10
11var sections = document.querySelectorAll('.section');
12
13var scaler = document.getElementById('scaler');
14
15var scrollDiv = document.getElementById('scroll');
16
17for(var i = 0; sections.length > i; i++) {
18  var itemZ = sections[i].getAttribute('data-z');
19  sections[i].style.transform = 'translateZ(' + - itemZ + 'px)';
20  if(i === sections.length -1) {
21    scrollDiv.style.height = itemZ * 100 + window.innerHeight + 'px';
22  }
23}
24
25
26window.addEventListener('scroll', function() {
27  var scrollNum = Math.round(scrollElm.scrollTop / 100);
28  if(scrollNum % 5 === 0) {
29    scaler.style.transform = 'translateZ(' + scrollNum + 'px)';
30  }
31});
32
33$('a[href^="#"]').on('click', function() {
34  var speed = 300;
35  var easing = 'swing';
36  $(scrollElm).animate({
37    scrollTop: $($(this).attr("href")).data('z') * 100
38  }, speed, easing);
39  return false;
40});

m.ts10806

2022/03/31 09:57

タイトルに要件が何もないので、要件のみ記載してください。https://teratail.com/help/question-tips#questionTips31

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

回答1件

Intersection Observer を使うのがいいかと思います。
JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA

　質問の内容に合わなかったので訂正します。

　transitionend イベントを使うといいかと思います。

　サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/dLmh9ywu/

js
1scaler.addEventListener('transitionstart', e => {
2    $('a').removeClass('active')
3    $('.section').removeClass('active')
4})
5
6scaler.addEventListener('transitionend', e => {
7    const target = $('.section')[scaler.style.transform.match(/\d+/)[0] / 5];
8    $(target).addClass('active')
9    $(`[href="#${target.id}"]`).addClass('active')
10})