ある地点までスクロールしたら追尾してくるor表示するヘッダーっていう記事は結構あるんですが、フッターまで到達したら消えるっていうjavascriptの参考ページが少なかったので、ご紹介。

 

使い道

例えばキャンペーンバナーをフッター追尾にする場合、フッターの最後まで追尾してしまうと、フッターコンテンツが見えなくなってしまう。なので、フッターに近づいたら消え、フッターから遠い場合のみ表示したい！って時に使えるよね！

 

フッター付近で消えるjavascript（フェードアウト）

 

早速ソースコード。上記のソースコードはフッターから500px以内になった場合、class="banner"をフェードアウトし、500px以上になったらフェードインするjavascriptです。script内のクラス名だけ変えれば（$('.banner') の部分）コピペで利用できます( *´艸｀)

 

フッター付近で表示するjavascript（フェードイン）

 

見てもらうと分かる通り、フェードインとフェードアウトを入れ替えた手抜きです。本当にありがとうございました。

一応解説

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の参考は少なかったので書いてみました。参考になったなら嬉しいな！