スクロール量に応じて文字の色を変化させたい。

前提・実現したいこと

どなたか助けてください。
以下のt01、t02、t03がスクロール量に応じて文字色を変化するようにしたいのですが、
jsの書き方で困っています。

<div id="textBox">
<p id="t01">あいうえおかきくけこ</p><p id="t02">さしすせそたちつてと</p><p id="t03">なにぬねのはひふへほ</p>
</div>

デフォルト＝＝＝＝＝＝＝
color: white;
opacity: 0.7;
font-size: 100px;
＝＝＝＝＝＝＝＝＝＝＝＝＝＝

100pxスクロールしたら、#t01に以下を付与したい。＝＝＝＝
.op1{
	color: black;
	opacity: 1;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
※#t02、#t03　変化なし

200pxスクロールしたら、#t02に以下を付与し、#t01はデフォルトに戻したい。＝＝＝＝
.op1{
	color: black;
	opacity: 1;
}
※#t03　変化なし
＝＝＝＝＝＝＝＝＝＝＝＝＝＝

300pxスクロールしたら、#t03に以下を付与し、#t01、#02はデフォルトに戻したい。＝＝＝＝
.op1{
	color: black;
	opacity: 1;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝

以下のJSを途中まで書いた所で、分からなくなってしまっております。

//スクロール発火イベント
window.addEventListener( "scroll" ,function(){

  //スクロールの高さを取得
  let scroll = window.pageYOffset;
  
  if( scroll > 100 ){ 
    $('#t01').addClass('op1');

yambejp

2021/09/28 02:31

t01,t02,t03は位置固定なのでしょうか？それごとスクロールしてしまうと表示からきえてしまう場合もあるので・・・

sajirari

2021/09/28 02:53

ご返信をありがとうございます。これごとスクロールするのですが、見えている範囲でも変化が確認できなかったので、どうしたものかな、といった感じです。どうぞ宜しくお願いいたします。

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

回答1件

ベストアンサー

javascript
1<style>
2#textBox p{
3color: white;
4opacity: 0.7;
5font-size: 100px;
6}
7#textBox p.active{
8color: black;
9opacity: 1;
10}
11<script>
12window.addEventListener('scroll', ()=>{
13  var s=window.pageYOffset; //貼り付け忘れ
14  t01.classList.toggle('active',s>=100 && s<200);
15  t02.classList.toggle('active',s>=200 && s<300);
16  t03.classList.toggle('active',s>=300 && s<400);
17});
18</script>

投稿2021/09/28 05:12

編集2021/09/28 05:53

yambejp

総合スコア116734

sajirari

2021/09/28 05:49

ありがとうございます。すみません、うまくいかないようで、初歩的な質問で申し訳ないのですが、こちらは基本のjsも読み込みが必要でしょうか？ HTMLの記述は以下の通りです。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="textBox"> <p id="t01">あいうえおかきくけこ</p><p id="t02">さしすせそたちつてと</p><p id="t03">なにぬねのはひふへほ</p> </div> <script> window.addEventListener('scroll', ()=>{ t01.classList.toggle('active',s>=100 && s<200); t02.classList.toggle('active',s>=200 && s<300); t03.classList.toggle('active',s>=300 && s<400); }); </script> </body> </html> CSSの記述は以下の通りです。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ @charset "utf-8"; /* CSS Document */ html, body, p{ margin: 0; padding: 0; } body{ background-color: white; } #textBox{ width: 800px; margin: 0 auto; background-color: #FF4081; padding: 600px 0; } #textBox p{ color: white; opacity: 0.7; font-size: 100px; display: inline; } #textBox p.active{ color: #000!important; opacity: 1!important; }