前提・実現したいこと
どなたか助けてください。
以下の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');
回答1件
あなたの回答
tips
プレビュー