質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

受付中

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

niconic73027793
niconic73027793

総合スコア203

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0評価

0クリップ

87閲覧

投稿2022/05/21 10:34

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

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") 

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

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

だけが動作し

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

が動きません。

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

参考にしたサイト

スクロールが特定のエリアに入ったかどうかを検知する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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。