jQuery : 縦スクロールで上からフェードインする固定ヘッダー

縦スクロールしたらフワッとフェードインしてきてそのまま固定されるヘッダーの制作備忘録。

できるだけスクリプトがシンプルで、簡易に設置できるものを探していて、見つけて実践したらとても簡単に設置できたので、備忘録として記事に。

下記のサイトを活用させて頂きました。すばらしい記事に感謝です!

 

【jQuery】縦スクロールすると上からフワッと出てきて固定されるメニューヘッダ

設置方法は以下に簡単に記載しておきます。

 

 

スクリプト

jQuery本体の読み込みとヘッダ固定用のスクリプト
*今回使用したサイトはWordpressなどのCMSではなかったので、スクリプトは内に記述しました。

「.XXXXXX」をフェードインさせるパーツのクラス名もしくはID名を記述。

 

 

HTMLソース

body直下あたりに記述。
内容は特に指定はない。

 

 

CSSでデザイン周りを調整

記述が必要なのは以下
・最初読み込んだときは透過:opacity
・他のアイテムに対して最上位のレイヤーになるように:z-index
・スクロールするまで隠すために高さをマイナスマージンに

 

引用元サイトのCSS例

 

表示方法を違う形が良い場合は以下のサイトも活用できます。

ヘッダー・ナビゲーションを固定表示させるアイデア5つ(2017)

You may also like

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です