最初はスクロールに連動→画面から消える前に固定されるメニューを作る

さて、それでは、jQueryを使って「最初のうちはスクロールに連動するが、消える前に固定されるサイドメニュー」を作ってみましょう。以下の4ステップで実現できます。

0. jQuery本体を読み込む
1. メニュー部分にidを付加する
2. サイドメニューを途中から固定させるためのCSSを記述する
3. メニューの表示位置とスクロール量を比較して固定・非固定を切り替えるスクリプトを書く

以下に順番に解説していきます。

0. jQuery本体を読み込む

ここではjQueryを使うので、最初にjQuery本体を読み込んでおく必要があります。例えば、HTML中に以下の1行を記述すると、jQuery配布サイトが提供しているCDNサーバからjQuery本体を読み込めます。よく分からない場合は、とりあえず以下の1行をHTML内に記述しておいて下さい。
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
なお、既に自分のウェブサーバ上にjQuery本体があるなら、そちらを読み込むよう記述しても問題ありません。

1. メニュー部分にidを付加する

「(ユーザのスクロール操作から独立して)固定させたいメニュー部分」を作っているボックスに、任意のid名を割り振っておきます。id名は何でも構いませんが、ここでは例として、「fixedNavi」というid名を付加しておきます。
<div id="fixedNavi">
   ~サイドメニュー~
</div>
HTML側に必要な記述は、ただこれだけです。あとは、JavaScript側(jQuery側)で、このid名を使って処理を記述します。

※特定の要素をページの端に寄せて「サイドバー(サイドメニュー)」を作るための方法については、ここでの本題ではないので説明を割愛しています。必要であれば、後述のサンプルページのHTMLソース等をご参照下さい。

2. サイドメニューを途中から固定させるためのCSSを記述する

次に、サイドメニューを固定させるためのCSSソースを記述します。positionプロパティに値「fixed」を指定し、固定させたい座標を指定するだけです。
.fixBox {
   position: fixed;
   top: 0px;
   right: 0px;
}
上記は、サイドメニューが右端にある場合の例です。上端から0px・右端から0pxの位置に固定します。もし、左端にあるのであれば、「right: 0px」ではなく「left: 0px」と記述して下さい。

このCSSソースは、最初はどこにも適用しません。後から、ユーザのスクロール操作に合わせて、スクリプト側で適用させます。状況に応じて上記のCSSを適用させたり適用させなかったりすることで、メニュー部分の固定・非固定を切り替えます。

3. メニューの表示位置とスクロール量を比較して固定・非固定を切り替えるスクリプトを書く

前ページでも少しご紹介しましたが、「サイドメニューの表示位置」と、「ユーザがスクロールした量」を比較することで、サイドメニューの表示を固定したり非固定にしたりします。そのためのスクリプトは、以下の通りです。まずは、全文を掲載しておきます。
<script type="text/javascript">

   // ページの読み込みが完了してから実行
   $(function() {

      // 途中から固定したいボックスの情報を得る
      var navBox = $("#fixedNavi");
      var navOst = navBox.offset().top;

      // スクロールされた際に実行
      $(window).scroll( function() {
         // 現在のスクロール位置と、固定したいボックスの位置を比較
         if( $(window).scrollTop() > navOst ) {
            // 固定用のclassを付加
            navBox.addClass("fixBox");
         }
         else {
            // 固定用のclassを削除
            navBox.removeClass("fixBox");
         }
      });

   });
</script>
このわずか20行程度のスクリプトで、「ユーザのスクロール操作によって、画面から消え去る前に固定されるサイドメニュー」ができあがります。上記のソースはコピー&ペーストするだけで使えますが、ソース中の「#fixedNavi」部分は「サイドメニューに割り振ったid名」に、「fixBox」部分は「サイドメニューを固定するためのCSSに割り振ったclass名」に合わせて下さい。

なお、このJavaScriptソースの意味については、次のページで簡単にご紹介致します。