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

では追従バナーがフッターで非表示になる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のランディングページにも使用できます。
コメント