AboutデジタルIT・インターネットホームページ作成Webサイトのユーザビリティスクロールしてもサイドバーが消えないよう固定するホームページ作成/Webサイトのユーザビリティスクロールしてもサイドバーが消えないよう固定するページの端にあるナビゲーションメニューは、閲覧者がスクロールすると上方に消えてしまいます。それを防ぐため、スクロールの途中でメニューだけを固定させてみましょう。「メニューを作るボックスの表示位置」と「ユーザのスクロール量」とを比較して、メニューの固定・非固定を切り替えるスクリプトを作ります。jQueryを使えば簡単です。文宏ホームページ作成ガイド最初はスクロールに連動するが、画面から消える前に固定されるメニューページの端にメニューがあるレイアウトページの端にナビゲーションメニューがあるとき、ユーザがページをスクロールすれば、当然メニュー部分もスクロールします。そのままスクロールを続ければ、いずれはメニュー部分が画面外に出てしまい、メニューは見えなくなります。動作は下図のような感じです。上図のような、「画面から消え去る直前で表示を固定し、それ以上はユーザのスクロール操作とは連動せずにメニューが表示され続ける」デザインなら、常にナビゲーションメニューを表示し続けられるため、閲覧者にとって便利でしょう。このようなデザインは、jQueryを活用すれば、わずか数行のスクリプトを記述するだけで簡単に実現できます。上記のようなデザインを作るために必要なのは、「メニューを作るボックスの表示位置」と「ユーザのスクロール量」とを比較して、メニューを固定したり動かしたりするスクリプトです。JavaScriptの有名ライブラリである「jQuery」を使えば、それらの情報を取得することはとても簡単です。TOPへ戻るボタンを表示する方法」でも解説しましたが、例えば、$(window).scrollTop();という記述だけで、「ページの先頭から何ピクセルほどスクロールされたのか」という情報を取得できます。$("#fixedNavi").offset().top;という記述で、id名が「fixedNavi」の要素が、「画面上部から何ピクセルの位置に表示されているのか」という情報を取得できます。これらの記述を使って両者の値を比較すれば、閲覧者のスクロール操作によって、ナビゲーション用のボックスが画面上から消え去りそうかどうかを判断できます。「メニューが画面から消え去る直前で固定し、それ以上はユーザのスクロール操作とは連動せずにメニューが表示され続ける」デザインを使ったサンプルページ本記事で解説するために、右図のようなサンプルページを用意しました。以下のリンク先をブラウザで閲覧してみて下さい。→サイドバーのメニューを、スクロールの途中から固定する例このページを下方向にスクロールすると、最初のうちは、ページ右側に見えているメニュー区画も同じようにスクロールします。右側のメニュー区画が画面の最上部まで到達すると、それ以後は(メニュー部分だけ)スクロールは止まります。このサンプルページで下方向にスクロールし、右側にあるメニュー区画の表示の変化を確認してみて下さい。今回は、このようなデザインの作り方をご紹介致します。それでは次のページから、jQueryを使って「最初のうちはスクロールに連動するが、消える前に固定されるサイドメニュー」の作り方を見ていきましょう。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。