【JQuery】スマホの広告バナーのような、スクロールで非表示になるバナー
スマホの広告バナーのような、スクロールで非表示になるバナーの実装方法。
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を設定して無理やり画面外に出して消去しています。
コメントを残す