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

スマホのサイトで広告などに用いられている、

スクロール中に特定の要素を非表示にするjQueryのコードを組んでみました。

スマホでよく使われるので、スマホにも対応いたしました。

↓こちらがデモ

DEMO

方法

たとえばfooterをfixedにして、スクロール中非表示にする場合。

JavaScript

$(function(){ $(window).on("scroll touchmove", function(){ //スクロール中に判断する $("footer").stop(); //アニメーションしている場合、アニメーションを強制停止 $("footer").css('display', 'none').delay(500).fadeIn('fast'); //スクロール中は非表示にして、500ミリ秒遅らせて再び表示 }); });

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()でアニメーションを停止しています。

 

参考サイト

scroll( fn ) – jQuery API 日本語リファレンス

WRITER

ninomiya

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

この著者の記事を見る