【図解】JavaScript (jQuery)でヘッダーメニューをスクロール表示・非表示する方法
こんにちは、説也です。
この記事では、JavaScript(jQuery)よるヘッダーメニューの「 スクロールアニメーション 」のやり方を図解で紹介しています。
今回ご紹介する、ヘッダーメニューアニメーションは、下にスクロールするとメニューバーが隠れ
上にスクロールするとメニューバーが現れるアニメーション表現となります。
メニューバーを隠して、コンテンツを広く見せたい!という場合に有効ですので、是非お試しください。
CSSを基本からしっかり学びたい場合は「 CSS設計完全ガイド 」がオススメです。
詳細解説だけでなく、実践的モジュールが数多く詰まっており、CSS設計の考え方と実践法が身につきます。
実装コード 相関図
実行結果
コード解説
HTML
表示・非表示させたいメニュータグに id="header" を付与します。
また、その際に 表示クラス class="DownMove" も与えておきます。
CSS
CSSパートでは、ヘッダーメニューのデザインに加えヘッダーメニューが隠れるアニメーション
header.UpMove{ ~
ヘッダーメニューが現れるアニメーション
header.DownMove{ ~
を作成しておきます。
JavaScript ( jQuery )
JavaScriptパートでは、画面をロードしたタイミングと画面をスクロールしたタイミングでスクロール位置を確認し、表示するか非表示するかを判定して、CSSで作成したアニメーションクラスを適用します。
また、スクロールの位置が上に動いたのか下に動いたのかを判定する為に過去のスクロール位置がどこだったのかを beforePos = scroll_top; に保持させます。
以上となります。
ここまで、見ていただき、ありがとうございます。
少しでもあなたのWEB制作のお役にたてれば幸いです。
ではまた!
ディスカッション
コメント一覧
まだ、コメントがありません