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

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

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

よろしくお願いします！

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

JavaScript
CSS
HTML

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のランディングページにも使用できます。