Tweet

Pocket

スマホの広告バナーのような、スクロールで非表示になるバナーの実装方法。

JQuery

$(document).ready(function(){
	var bnrElm = $(".bnrBox"); // バナー要素
	var bnrClose = $(".closeButton"); // クリックでバナー表示を消すボタン要素
	
	$(window).on("scroll touchmove", function(e){ //スクロール中に判断する
		bnrElm.stop(); //アニメーションしている場合、アニメーションを強制停止
		bnrElm.css('display', 'none').delay(500).fadeIn('fast'); //スクロール中は非表示にして、500ミリ秒遅らせて再び表示
	});

	bnrClose.on('click', function() { // ボタンクリックでバナー表示を完全消去
		bnrElm.css('left','-9999px');
		// バナーをfixedの位置をleftにしている場合は「left」を指定
		// バナーをfixedの位置をrightにしている場合は「right」を指定
	});
});

スクロールすると表示が消えて、スクロールが止まると再び表示されます。
クローズボタンをクリックするとバナーが完全消去するようにしています。display:noneで非表示にするとスクロールでまた表示が復活してしまうので、「left」or「right」に-9999pxを設定して無理やり画面外に出して消去しています。