
【コピペOK】フッターまで行ったら消えるor表示するjavascript
スポンサードリンク
ある地点までスクロールしたら追尾してくるor表示するヘッダーっていう記事は結構あるんですが、フッターまで到達したら消えるっていうjavascriptの参考ページが少なかったので、ご紹介。
使い道
例えばキャンペーンバナーをフッター追尾にする場合、フッターの最後まで追尾してしまうと、フッターコンテンツが見えなくなってしまう。なので、フッターに近づいたら消え、フッターから遠い場合のみ表示したい!って時に使えるよね!
フッター付近で消えるjavascript(フェードアウト)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="banner"> <img src="img/test.jpg"> </div> /*javascript*/ <script type="text/javascript"> window.onscroll = function () { var check = window.pageYOffset ; //現在のスクロール地点 var docHeight = $(document).height(); //ドキュメントの高さ var dispHeight = $(window).height(); //表示領域の高さ if(check > docHeight-dispHeight-500){ //判別式 500はフッターからの距離です(ここはサイトのフッターに合わせて変更しましょう) $('.banner').fadeOut(1000); //1000 はフェードアウトの速度です。調整可 }else{ $('.banner').fadeIn(1000); //1000 はフェードインの速度です。調整可 } }; </script> |
早速ソースコード。上記のソースコードはフッターから500px以内になった場合、class="banner"をフェードアウトし、500px以上になったらフェードインするjavascriptです。script内のクラス名だけ変えれば($('.banner') の部分)コピペで利用できます( *´艸`)
フッター付近で表示するjavascript(フェードイン)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="banner"> <img src="img/test.jpg"> </div> /*javascript*/ <script type="text/javascript"> window.onscroll = function () { var check = window.pageYOffset ; //現在のスクロール地点 var docHeight = $(document).height(); //ドキュメントの高さ var dispHeight = $(window).height(); //表示領域の高さ if(check > docHeight-dispHeight-500){ //判別式 500はフッターからの距離です(ここはサイトのフッターに合わせて変更しましょう) $('.banner').fadeIn(1000); //1000 はフェードインの速度です。調整可 }else{ $('.banner').fadeOut(1000); //1000 はフェードアウトの速度です。調整可 } }; </script> |
見てもらうと分かる通り、フェードインとフェードアウトを入れ替えた手抜きです。本当にありがとうございました。
一応解説
window.onscroll = function () {
スクロールをする度にjavascriptを読み込む
var check = window.pageYOffset ;
現在のスクロール地点を「check」に代入
var docHeight = $(document).height();
var dispHeight = $(window).height();
サイトの高さを取得し、それぞれ代入
if(check > docHeight-dispHeight-500){
スクロール地点がフッターから500px以内なら(現在のスクロール地点-サイト全体の高さ-500)
カスタムする時のポイント
フッターから○○px離れたところでフェードイン(表示)orフェードアウト(非表示)したい!
script内の
check > docHeight-dispHeight-500
500がフッターからの距離になります。好きな地点(数字)を入力しましょう!
フェードイン(表示)orフェードアウト(非表示)の速度を変えたい!
script内の
$('.banner').fadeIn(1000);
1000が表示速度になります。
1000ミリ秒=1秒なので、表示を遅くしたいなら数字を大きく変更し、もっと早く表示したいのであれば、数字を小さくしましょう。
フェードアウトの際も一緒ですね。
まとめ
いかがでしたかー!ヘッダーから○○px離れてから表示するっていうjavascriptは結構見るんですが、フッターから○○px離れてたらっていうjavascriptの参考は少なかったので書いてみました。参考になったなら嬉しいな!
公開日:
最終更新日:2018/04/05