2箇所に　同じjquery の動きを設置したいが１つしか動作しません。

同じ　jquery を2箇所で動作させたいのですが、１つしか動作しません。

jqueryのコードを

/*スクロールが特定のエリアに入ったかどうかを検知するjQuery*/
jQuery(window).scroll(function() {
	let scrollTop = jQuery(window).scrollTop(); // スクロール上部の位置
	let areaTop = jQuery(".target-area01,target-area02").offset().top -100; // 対象エリアの上部の位置
	let areaBottom = areaTop + jQuery(".target-area01,target-area02").innerHeight() +50; // 対象エリアの下部の位置

	if (scrollTop > areaTop && scrollTop < areaBottom) {
		jQuery(".hamburger span").addClass("is-in"); // スクロールが対象エリアに入った場合
	} else {
		jQuery(".hamburger span").removeClass("is-in"); // スクロールが対象エリアから出ている場合
	}
});

上記のように、jQuery(".target-area01,target-area02")　

２箇所カンマ区切りで指定したところ、

.target-area01　の部分だけ動作し
.target-area01 のエリアに　スクロールされたら　ハンバーガーメニューの色が白くなる動作

だけが動作し

.target-area02 の部分にスクロールされたらハンバーガーメニューの色が白くなる動作

が動きません。

どうしたら、２箇所　動作するようになるのでしょうか？

参考にしたサイト

スクロールが特定のエリアに入ったかどうかを検知するjQuery | HPcode（えいちぴーこーど）

下記がhtml です

<div class="wrapper">
  <header id="header">
   <!-- メインビジュアル -->
   <div id="mainvisual">
    <div class="copy">
     <span class="en">ETELLIA</span>
     <span class="en">JUDO</span>
     <span class="en">CLUB</span>
     <span class="ja">心も体も鍛錬あるのみ</span>
    </div>
    <!-- /.copy -->


    <nav id="navi">
     <div class="container flex">

      <h1 class="site-title">
       <img src="/img/logo-navigation.png" alt="ロゴ" class="logo">
      </h1><!-- /.site-title -->
      <ul class="list-nav">
       <li><a href="#">
         <span class="en">HOME</span>
         <span class="ja">ホーム</span>
        </a>

       </li>
       <li><a href="#leaders">
         <span class="en">LEADERS</span>
         <span class="ja">指導者紹介</span>
        </a>

       </li>
       <li><a href="#blog">
         <span class="en">BLOG</span>
         <span class="ja">ブログ</span>
        </a>

       </li>
       <li><a href="#classes">
         <span class="en">CLASSES</span>
         <span class="ja">クラス紹介</span>
        </a>

       </li>
       <li><a href="#">
         <span class="en">HISTORY</span>
         <span class="ja">道場の歴史</span>
        </a>

       </li>
       <li><a href="#">
         <span class="en">MEMBER'S</span>
         <span class="ja">会員様へ</span>
        </a>
        <li class="sp-contact"><a href="#">
         <img src="/img/mail-mark.png" alt="メール">
         <span class="ja">お問い合わせ</span>
        </a>

       </li>
       </li>

      </ul>
      <!-- /.list-nav -->
     </div><!-- /.container -->

     <div class="contact drop-shadow">
      <a href="#">
       <img src="/img/mail-mark.png" alt="メール">
       <p>お問い合わせ</p>
      </a>
     </div><!-- /.contact -->
    </nav>
    <!-- /#navi -->

   </div>
   <!--/mainvisual-->
   <div class="hamburger js-hamburger">
    <span></span>
    <span></span>
    <span></span>
   </div>
   <!-- /.hamburger -->
     </header>
  <!-- /#header -->
  <main>
   <section id="your-goal">
    <div class="container">
     <div class="bg-logo">
      <h2 class="section-title color-black">
       <span class="en">YOUR GOAL</span><!-- /.en -->
       <span class="ja">エテリアの目指すもの</span><!-- /.ja -->
      </h2><!-- /.section-title -->
     </div><!-- /.bg-logo -->
     <div class="left-content-box">
      <ol class="list-box">
       <li>
        <p class="number-text"><span class="number">01</span>他人の気持ちを理解する</p>
       </li>
       <li>
        <p class="number-text"><span class="number">02</span>礼儀やあいさつ</p>
       </li>
       <li>
        <p class="number-text"><span class="number">03</span>強靭な肉体と精神</p>
       </li>
       <li>
        <p class="number-text"><span class="number">04</span>他責しない</p>
       </li>
      </ol>

      <img src="/img/your-goal-right-picure.jpg" class="drop-shadow" alt="柔道で投げ飛ばす画像">
      <div class="bg-box drop-shadow">
      </div><!-- /.bg-box -->
     </div><!-- /.left-content-box -->
     <div class="center-box">
      <div class="img-box">
       <img src="/img/your-goal-center-picture.jpg" alt="青と白の柔道着姿">
      </div><!-- /.img-box -->
      <div class="text-box">
       <p>千葉県松戸市で活動しているエテリア柔道クラブです。</p>
       <p>エテリア柔道クラブは、知識・経験豊富で情熱のある指導者が指導しています。</p>
       <p>礼儀を学びたい、身体を鍛えたい、将来オリンピックを目指したい人、幼児～入門を随時受け付けています。</p>
      </div><!-- /.text-box -->
     </div><!-- /.center-box -->
    </div><!-- /.container -->
    <div class="dojo-kun target-area01">

     <div class="dojo-kun-text">
      <h2 class="section-title color-white">
       道場訓
      </h2>
      <ol class="list-box">
       <li>一 、 大 き な 声 で 返 事 、 挨 拶 を す る 。</li>
       <li>二 、 素 直 な 心 で 一 生 懸 命 稽 古 す る 。
       </li>
       <li>三 、 感 謝 、 思 い や り の 気 持 ち を 忘 れ な い 。</li>
      </ol>
     </div><!-- /.dojo-kun-text -->
     <img src="/img/logo-red.png" alt="赤いロゴ" class="red-logo">
     <div class="content01"></div>
     <div class="content02"></div>
    </div><!-- /.dojo-kun -->
   </section>
   <section id="classes">
    <div class="inner">
     <div class="content">
      <h2 class="section-title color-white">
       <span class="en">CLASSES</span><!-- /.en -->
       <span class="ja">クラス紹介</span><!-- /.ja -->
      </h2><!-- /.section-title -->

      <ul class="class-box-list">
       <li>
        <a href="#">
         <h3 class="class-name">キッズクラス</h3>
         <img src="/img/kids-class.jpg" alt="" class="kids">
        </a>
       </li>
       <li>
        <a href="#">
         <h3 class="class-name">初心者クラス</h3>
         <img src="/img/beginner-class.jpg" alt="" class="beginner">
        </a>
       </li>
       <li>
        <a href="#">
         <h3 class="class-name">一般クラス</h3>
         <img src="/img/general-class.jpg" alt="" class="general">
        </a>
       </li>

       <li>
        <a href="#">
         <h3 class="class-name">女性クラス</h3>
         <img src="/img/lady-class.jpg" alt="" class="lady">
        </a>
       </li>
      </ul>




     </div><!-- /.content -->
    </div><!-- /.inner -->

   </section><!-- /#classes -->
   
   <section id="leaders" class="target-area02">
    <a href="#">
     <div class="circle-button">
      <div class="arrow-right">＞</div><!-- /.arrow-right -->
     </div>
    </a>
    <div class="leader-box">
     <div class="leader-img">
      <img src="/img/leaders.jpg" alt="">
     </div><!-- /.leader-img -->
     <div class="leader-bg">
      <a href="#">
       <h2 class="section-title color-white">
        <span class="en">LEADERS</span><!-- /.en -->
        <span class="ja">指導者紹介はこちら</span><!-- /.ja -->
       </h2><!-- /.section-title -->
      </a>
     </div><!-- /.leader-bg -->
    </div><!-- /.leader-box -->
   </section><!-- /#leaders -->
   
  </main>
 
 </div><!-- /.wrapper -->

/*
ハンバーガ―メニュー
*/
.hamburger {
 display: block;
 width: 100px;
 height: 100px;
 position: fixed;
 top: 0;
 right: 0;
 z-index: 30;
 cursor: pointer;
 transition: 0.3s;
}

.hamburger:hover {
 opacity: 0.7;
}



/* ハンバーガーメニューの線の設定（メニューが閉じている時） */
.hamburger span {
 width: 50px;
 height: 2px;
 background: #000;
 position: absolute;
 left: 25px;
 transition: 0.3s ease-in-out;
}
/*指定した領域だけハンバーガーメニューの色を変える*/

.hamburger span.is-in {
 color: #fff;
 }

/* 1本目の線の位置を設定 */
.hamburger span:nth-child(1) {
 top: 36px;
}

/* 2本目の線の位置を設定 */
.hamburger span:nth-child(2) {
 top: 50px;
}

/* 3本目の線の位置を設定 */
.hamburger span:nth-child(3) {
 top: 64px;
}

/*
ハンバーガーメニューの線の設定（メニューが開いている時）
1本目の線を-45度回転
*/
.hamburger.active span:nth-child(1) {
 top: 47px;
 left: 25px;
 background: #000;
 transform: rotate(-45deg);
}

/* 2本目と3本目は重ねて45度回転 */
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
 top: 47px;
 background: #000;
 transform: rotate(45deg);
}

.hamburger {
 color: #000;
 transition: color 0.4s ease-out;
}

下記はテスト環境URLです

Open Live Link:
https://smooth-smoke.localsite.io

If prompted, enter the information below.

Username: learning

Password: glistening

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

回答1件

Get the current coordinates of the first element in the set of matched elements
.offset() | jQuery API Documentation

となっていますので、each で回すのがいいかと思います。

.each() | jQuery API Documentation

投稿2022/05/23 02:41

Lhankor_Mhy

総合スコア36115

niconic73027793

2022/05/25 01:26

/*スクロールが特定のエリアに入ったかどうかを検知するjQuery*/ jQuery(window).scroll(function () { let scrollTop = jQuery(window).scrollTop(); // スクロール上部の位置 let areaTop = jQuery(".target-area01,target-area02").each.offset().top - 100; // 対象エリアの上部の位置 let areaBottom = areaTop + jQuery(".target-area01,target-area02").each.innerHeight() + 50; // 対象エリアの下部の位置 if (scrollTop > areaTop && scrollTop < areaBottom) { jQuery(".hamburger span").addClass("is-in"); // スクロールが対象エリアに入った場合 } else { jQuery(".hamburger span").removeClass("is-in"); // スクロールが対象エリアから出ている場合 } }); 上記のように記述したのですが、反応しません。記述が間違っているのでしょうか？