サイドバー風のナビゲーションパーツをスクロールさせても一定の場所に固定してくれるのが、このjQueryプラグイン『stickyMojo』です。動作も軽くスムーズで、違和感がない固定のサイドナビゲーションが実装できるので便利です。

サンプルを作ってみました。

→ 「スクロールしても良い感じにナビゲーションメニューを固定できるjQueryプラグイン『stickyMojo』」サンプル

フッターのコンテンツまでくると、フッターと重ならないように調整してくれますね。このように画面をリサイズしてもメインコンテンツと重ならない、またフッターコンテンツと重ならないように固定できます。

設置の仕方も簡単です。

【使用方法】
まずは、本家の「stickyMojo.js」のサイトからjsファイルをダウンロードします。

<head>の部分にJavascriptを呼び出すコードを記述します。

続いて<body>部分に基本的なレイアウトを記述しておきます。以下のコードが最低限必要なストラクチャーとなります。id名は任意のものでも構いません

次にCSSを準備しましょう。ちょっとした決まり事があるようです。

  • どのようなid名でも好きなように使用できますが、全体的な構造は、ラッパーのdiv要素の内部にサイドバーの要素とメインコンテンツの要素を作る必要があります。
  • ラッパー部分の要素は、幅を指定する必要があります。
  • サイドバーは、左右どちらにフロートされている必要があります。
  • サイドバーは、マージントップとマージンボトムの値を設定する必要があります。

ここでは、本家で紹介されているCSSをそのまま使用してみます。

最後に</body>の直前にJavascriptの設定をします。

たったこれだけで、サイドバーのパーツを固定することができます。

サンプルのソースを記述しておきます。どうごご参考まで。
HTML

CSS

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