ホームページ制作 漫画で説明

効果が実感できる、ユーザーの記憶に残る制作なら「Memorynator」

0776-65-9795

営業時間 10:00~18:00

フェードイン フェードアウト

【コピペOK】フッターまで行ったら消えるor表示するjavascript

スポンサードリンク

ある地点までスクロールしたら追尾してくる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の参考は少なかったので書いてみました。参考になったなら嬉しいな!

 - ホームページ・ウェブサイト制作

この記事の執筆者:

-->