スクロールが特定のエリアにはいったら、色を変えるjquery を実装しようとしています。
ここでは背景が黒い部分のときだけ、ハンバーガーメニューの色を白色にしようと記述しています。
※PC 時は非表示でスマホ時のみハンバーガーメニューがでるようにしています。
/指定した領域だけハンバーガーメニューの色を変える/
.hamburger span.is-in {
color: #fff;
}
指定したエリアに入ったら ハンバーガーメニューのバーが白くなるように指定しています。
指定したエリアは
target-area とクラスを付与しています。
しかし、記述をしても、指定したエリアにきてもハンバーガーメニューの色が変わりません。
どうしたら変わるでしょうか?
ちなみに、
前に作ったサイトでは動作しました。
Open Live Link:
https://pretty-flag.localsite.io
If prompted, enter the information below.
Username: jewelry
Password: supreme
※ 指定したエリアまでスクロールすると、ヘッダー固定のお問い合わせメニューの色が黒くなります。
今作っているサイトでは動作しません。
Open Live Link:
https://smooth-smoke.localsite.io
If prompted, enter the information below.
Username: learning
Password: glistening
試した事
動作したサイトと動作したサイトの違いを確認
しましたがわかりませんでした。
jquery の動作チェック(スムーススクロールが動作しているのjqueryは動いていると思います)
検証ツールのチェック
指定したエリアにスクロールすると、span classに is-in というクラスがついているのが確認できましたが、
色が変わりません。
.hamburger span.is-in {
color: #fff;
}
の書き方がNGなのかもしれませんがわかりません。
参考にしたサイト
スクロールが特定のエリアに入ったかどうかを検知するjQuery | HPcode(えいちぴーこーど)
/* ハンバーガ―メニュー */ .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; }
/*スクロールが特定のエリアに入ったかどうかを検知するjQuery*/ jQuery(window).scroll(function() { let scrollTop = jQuery(window).scrollTop(); // スクロール上部の位置 let areaTop = jQuery(".target-area").offset().top -100; // 対象エリアの上部の位置 let areaBottom = areaTop + jQuery(".target-area").innerHeight() +50; // 対象エリアの下部の位置 if (scrollTop > areaTop && scrollTop < areaBottom) { jQuery(".hamburger span").addClass("is-in"); // スクロールが対象エリアに入った場合 } else { jQuery(".hamburger span").removeClass("is-in"); // スクロールが対象エリアから出ている場合 } });
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。