Blog

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

2014.06.11Cat:jQuery デザイナー

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

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

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

 

↓こちらがデモ

DEMO

 

方法

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

JavaScript

判断するタイミングは、PCの場合scrollだけで問題ありませんが、

スマホの場合、スクロールが完全に終わるまでイベントが発生しないようですので、touchmoveを用いました。

 

イベントが発生したら、対象の要素を、一度.css()でdisplay:noneにして非表示にし、

.delay()でタイミングを遅らせた後に、.fadeIn()で再び表示します。

スクロール中はずっと表示させないため、はじめに.stop()でアニメーションを停止しています。

 

参考サイト

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

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ