最初はスクロールに連動→画面から消える前に固定されるメニューを作る
さて、それでは、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ソースの意味については、次のページで簡単にご紹介致します。
