画面をスクロールした時にjQueryでヘッダーをフワッと表示する方法
570 回閲覧されました
みなさんこんにちは、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クラスが外れて画面上に戻ります。
これで完成です。