jQueryプラグイン「stickUp」はページの上部にメニューを固定して表示させることができるjQueryプラグインです。

ワンページスクロールサイトのみならず、縦長にコンテンツがあるページにメニューを固定させて表示させておくというのは、最近よく使われる手法です。

サンプルを作ってみましたので、みてもらうとわかりやすいと思います。

⇒ スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」サンプル

設置の仕方も簡単にできる便利なjQueryプラグインです。

導入方法

まずは、こちらのstickUpのGilyHubのサイトからファイルを一式ダウンロードします。

次のようなメニューを作ります。

次にjQueryを読み込ませて、設定します。

※ 対応したメニューのリンクと同じ名前でそれぞれIDを付けます。
※※ メニューのクラス名とアクティブになってるときのクラス名を付けます。

最後に、CSSで外観を整えたら完成です。

サンプルのソースを記しておきます。どうぞご参考まで。(コンテンツは省略してあります。)

この記事と関連してると思われる記事: