さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】スマホの広告バナーのような、スクロールで非表示になるバナー

Pocket
LINEで送る

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

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を設定して無理やり画面外に出して消去しています。

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容