タイトルの通り、生のJavaScriptで
①スクロールイベント発火時、
②親要素がビューポート上部を通過している間、
③親要素の範囲内に限定して
子要素に"position: fixed;"のプロパティをもつクラス属性を付与したいと考えております。
下記ソースコードになります。
HTML5
1 <main> 2 <div class="one-page"></div> 3 <div class="box"> 4 <h1 class="ori">固定できるかな</h1> 5 </div> 6 <div class="one-page"></div> 7 <div class="one-page"></div> 8 </main>
SCSS
1main { 2 .one-page { 3 width: 100%; 4 height: 100vh; 5 background-color: #f1f1f1; 6 } 7 .box { 8 width: 20vw; 9 height: 200px; 10 background-color: darkseagreen; 11 .is-fixed { 12 position: fixed; 13 top: 0; left: 0; 14 } 15 } 16}
JavaScript
1//親要素のスクロール量を加味した位置(top, bottom)の取得 2let elem = document.querySelector('.box'); 3let rect = elem.getBoundingClientRect(); 4let y = rect.top + window.scrollY; 5let yBottom = rect.bottom + window.scrollY; 6 7 8window.addEventListener('DOMContentLoaded', function() { 9 10//スクロールイベント時に発火! 11 window.addEventListener('scroll', function() { 12 13 if ( window.scrollY > y ) { 14 document.querySelector('.ori').classList.add('is-fixed'); 15 } else if ( window.scrollY < yBottom ) { 16 document.querySelector('.ori').classList.remove('is-fixed'); 17 } else { 18 ; 19 } 20 }); 21});
上記のソースコードでは
親要素のトップ位置での切り替えはできているのですが、
ボトム位置での切り替え(クラス属性が外れて子要素の固定解除)ができません。
他にもif条件を
JavaScript
1if( y < window.scrollY < yBottom ) { 2… } else { 3… }
でも試したのですがこれだと常にクラス属性が付与されてしまいます。
お手数おかけしますが、もしお時間があればご教示の程よろしくお願いします。
尚、teratailを使用するのが今回初なので、
わかりにくい部分もあると思いますが何卒ご了承ください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/06/30 13:09
2022/06/30 13:32
2022/06/30 23:15