画面をスクロールした時にjQueryでヘッダーをフワッと表示する方法

画面をスクロールした時にjQueryでヘッダーをフワッと表示する方法

みなさんこんにちは、WEB制作のエンジニアのjonioです。

今回は画面をスクロールした時にヘッダーをフワッと表示する方法を説明します。

 

デモ画面

デモは↓です。

See the Pen
Untitled
by hayata19791218 (@hayata19791218)
on CodePen.

 

コードの解説

HTMLとcssを↓にします。

22行目〜32行目の部分がスクロールした時に上からフワッと表示されるヘッダーです。

61行目〜65行目でスクロールした時にフワッと表示するヘッダーが画面の外に隠れるようにしています。

jQueryがこの記事の解説なので解説します。

 

jQuery

まずはスクロールした時に表示するヘッダーを取得します。

次に画面をスクロールした時 を考えます。

画面に対して何かをする時は6行目の「$(window)」です。

次はスクロール量を取得します。

4行目の「.scrollTop()」でスクロール量を取得でき「$(window).scrollTop()」で画面のスクロール量を取得できます。

次は画面をスクロールするとヘッダーが上からフワッと表示できるようにします。

8行目〜10行目でスクロール量が100pxを越えたらfadeinクラス(top:0)が画面の上に隠れていたヘッダーに付いて画面上に表示されます。

10行目〜12行目でスクロール量が100pxより小さくなったらfadeinクラスが外れて画面上に戻ります。

これで完成です。