【jQuery】スマホの広告みたいにスクロール中に非表示にするjQueryのコード

スマホのサイトで広告などに用いられている、
スクロール中に特定の要素を非表示にするjQueryのコードを組んでみました。
スマホでよく使われるので、スマホにも対応いたしました。
↓こちらがデモ
方法
たとえばfooterをfixedにして、スクロール中非表示にする場合。
JavaScript
1 2 3 4 5 6 7 | $(function(){ $(window).on("scroll touchmove", function(){ //スクロール中に判断する $("footer").stop(); //アニメーションしている場合、アニメーションを強制停止 $("footer").css('display', 'none').delay(500).fadeIn('fast'); //スクロール中は非表示にして、500ミリ秒遅らせて再び表示 }); }); |
判断するタイミングは、PCの場合scrollだけで問題ありませんが、
スマホの場合、スクロールが完全に終わるまでイベントが発生しないようですので、touchmoveを用いました。
イベントが発生したら、対象の要素を、一度.css()でdisplay:noneにして非表示にし、
.delay()でタイミングを遅らせた後に、.fadeIn()で再び表示します。
スクロール中はずっと表示させないため、はじめに.stop()でアニメーションを停止しています。
参考サイト
Author Profile

NINOMIYA
Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。
SHARE