前提・実現したいこと
ブラウザサイズ変更時のブレイクポイントの切り替えの際の挙動がおかしい
https://teratail.com/questions/281692
ハンバーガーメニューのブラウザバック時の挙動がおかしい
https://teratail.com/questions/281681
前回二つの質問を投稿しましたが、その原因は別に実装していたフェードイン機能であることがわかりました。
※フェードインのjsをコメントアウトすることで問題現象がなくなったためです。
ただし、ハンバーガーメニューなどは直接フェードインを実装していない箇所にもかかわらず
なぜ上記のような挙動が発生しているのか原因がわかりません。
その原因について分かる方がいらっしゃいましたら教えていただきたいです。
また、スクリプト削除以外の回避方法があればそちらもお願いしたいです。
推測としては、フェードインのjsの中に高さを計算するスクリプトがあるため
ページ全体に影響しているのではないかと考えております。
該当のソースコード
jQuery
1//fadein 2$(function(){ 3 $(window).scroll(function (){ 4 $('.fadein').each(function(){ 5 var elemPos = $(this).offset().top; 6 var scroll = $(window).scrollTop(); 7 var windowHeight = $(window).height(); 8 if (scroll > elemPos - windowHeight + 200){ 9 $(this).addClass('scrollin'); 10 } 11 }); 12 }); 13});
CSS
1/* 画面外にいる状態 */ 2.fadein { 3 opacity : 0.1; 4 transform : translate(0, 25px); 5 transition : all 500ms; 6 } 7 8/* 画面内に入った状態 */ 9.fadein.scrollin { 10 opacity : 1; 11 transform : translate(0, 0); 12 } 13 14/* 2つ目の要素に200msのdelayをかける */ 15.fl_fd .fadein:nth-child(2) { 16 -moz-transition-delay:200ms; 17 -webkit-transition-delay:200ms; 18 -o-transition-delay:200ms; 19 -ms-transition-delay:200ms; 20 } 21/* 3つ目の要素に400msのdelayをかける */ 22.fl_fd .fadein:nth-child(3) { 23 -moz-transition-delay:400ms; 24 -webkit-transition-delay:400ms; 25 -o-transition-delay:400ms; 26 -ms-transition-delay:400ms; 27 }
あなたの回答
tips
プレビュー