いつもお世話になっております。
現在とあることをやりたいのですが、微妙に実現できずに困っています。
やりたいことはまず最初はある画像要素をウィンドウの下に固定させています。
スクロールしてあるボックス要素がウィンドウ内に入ってきたら画像要素の固定を解除したいのです。
そこでjavascript でウィンドウの高さを取得し、スクロール内でボックス要素のtopの位置をgetBoundingClientRectで取得して、ウィンドウの高さより小さくなったら画像要素に「isRelative」といったクラスを追加して「position:relative」にして、ボックス要素がウィンドウの高さを超えたら(見えなくなったら)画像要素をウィンドウの下に固定するためにクラスを削除するといった内容です。
ただボックス要素がウィンドウ近くになるとチカチカしてちらつきボックス要素と画像要素がブレます。おそらくずっとボックス要素のtopの位置を取得しているのが原因だと思うのですがこれをどう処理したらいいのか分かりません。
ご教授よろしくお願いいたします。以下コードです。
固定させる画像が「fixed」で特定のボックス要素が「kanren」といったIDです。
html
1<div class="box"></div> 2<div class="box"></div> 3<div class="box"></div> 4<div id="fixed"><img src="photo.jpg"></div> 5<div id="kanren" class="box"></div>
css
1 2.box{ 3 width:400px; 4 height:400px; 5 background-color:#333; 6 margin-top:30px; 7} 8 9#kanren{ 10 background-color:#ff0000; 11} 12 13#fixed{ 14 position:fixed; 15 bottom:0; 16} 17 18#fixed.relative{ 19 position:relative; 20}
javascript
1var wh = window.innerHeight; 2 3var kanren = document.getElementById("kanren"); //基準となる特定のボックス 4var fixed = document.getElementById("fixed"); //固定させている画像 5 6 7window.addEventListener("scroll", e => { 8 9 //ポジションを取得 10 var pos = kanren.getBoundingClientRect(); 11 var py = Math.floor(pos.top); 12 13 if (py < wh) { 14 fixed.classList.add("relative"); 15 }else{ 16 fixed.classList.remove("relative"); 17 } 18}); 19
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/11/28 12:01 編集
2019/11/28 13:55
退会済みユーザー
2019/12/01 02:31
2019/12/01 03:37
2019/12/01 03:37
退会済みユーザー
2019/12/01 04:08
2019/12/01 04:08
退会済みユーザー
2019/12/04 01:26