スクロールに追随するナビゲーションの作成

-
カテゴリー:
javascript 

新年1発目のサンプルになります。

画面をスクロールするとヘッダーやナビゲーションが画面上部からニョキッと現れてそのままスクロールに追随する演出を最近よく見るのですが、簡単なサンプルを作ってみたいと思います。

と、言っても実際はほぼjavascriptのみで実装しますので、簡単なのですが、まずjqueryを使用しますので、サイトよりダウンロードを行い、外部ファイルとして読み込みます。

次にスクロールされた際にナビゲーションを追随させるためのjavascriptを書きます。

ヘッダーとナビゲーションの高さ分スクロールされるとナビゲーションにpositionのfixedを設定し、一度画面外に配置します。
次に画面上部からニョキッと現れるようにアニメーションさせています。

画面の上部にスクロールされ、元々のナビゲーションの位置にまで戻るとナビゲーションのpositionをstaticに戻し、完成です。

これを応用させれば、ヘッダー全体をスクロールに追随させたりすることができます。

サンプルはこちら