フッターまでスクロールすると追従バナーが非表示になるJavaScript

フッターまでスクロールすると追従バナーが非表示になるJavaScript JavaScript

この記事の目次

質問する生徒
生徒

フッターが追従バナーで隠れて困ってます。

回答する先生
先生

では追従バナーがフッターで非表示になるJavaScriptを教えますね。

質問する生徒
生徒

よろしくお願いします!

回答する先生
先生

動作確認はこちらのフッターで非表示になる追従バナーのDEMOからどうぞ!

JavaScript

$(function() {
  $(window).scroll(function () {
    var banner = $('#followup-bg');
    var off = $('#not_followup').offset();
    if ($(this).scrollTop() > off.top -600) {
        banner.fadeOut();
    } else {
        banner.fadeIn();
    }
  })
});

$(window).scroll(function () { });{}内にwindowがスクロールされたら実行する処理を入れる。
var banner = $('#followup-bg');変数のbannerにCSSのid要素を指定。
var off = $('#not_followup').offset();変数のoffはCSSのid要素not_followupの位置を取得。
要素.offset()対象要素の座標位置を取得する
if ($(this).scrollTop() > off.top -600) {}変数offが縦方向に-600位置の場合
banner.fadeOut();フェードアウトする。
banner.fadeIn();フェードインする。
-600の数字を変更して表示と非表示の調整をする。

CSS

#followup-bg{
	width: 100%;
	bottom: 0;
	left:0;
	background-color:rgba(0,5,8,0.2);
	position: fixed;
}
#followup-main {
	width:100%;
	padding: 5px 0 10px 0;
	text-align: center;
	z-index: 2;
}

background-color:rgba(0,5,8,0.2);背景色を指定
display: none;上記CSSコードとDEMOにはないが、初期非表示にしたい場合に追加する。スクロールしてから追従バナーが表示される。

HTML

<div id="followup-bg">
  <div id="followup-main">
    <img src="バナーURL" alt="" width="バナー" />
  </div>
</div>

<div id="not_followup">
追従バナーを非表示にしたい要素
</div>

<div id="not_followup"></div>追従バナーを非表示にする要素。

質問する生徒
生徒

これをコピペすれば追従バナーをフッターで非表示にできますね。

回答する先生
先生

はい、コピペでいけます。

質問する生徒
生徒

非表示にする要素をフッターよりも手前に置けば、他にも使用できそうですね。

回答する先生
先生

購入フォーム前で追従バナーを非表示にできるので、ECのランディングページにも使用できます。