第5回 Tips7 メニューを固定位置に追随させたい

デザインもしくはユーザビリティを向上させる目的で、グローバルナビゲーションなどのサイト全体や縦に長いページではページ全体に共通するようなメニューの位置をページのスクロールに合わせて追随させたい場合があるだろう【1】。

【1】クロールしても右上に追随されてくる（▲クリックすると拡大します）

それを実現する方法のひとつとして「skuare.net」の「Live floating menu」（www.skuare.net/test/jFloatingmenu.html）を紹介しよう。

まずはHTMLを用意しよう【2】。そしてCSSで表示位置を指定する【3】。jQueryが必要なのでダウンロードするか（jquery.com）、「AJAX Libraries API」（code.google.com/intl/ja-JP/apis/ajaxlibs/）などWeb上のものを読み込む。併せてjQuery のプラグイン「jquery.dimensions.js」（plugins.jquery.com/project/dimensions）を読み込んでおこう。

【2】HTML

【3】CSS。「display:table」、「display:table-cell;」がポイントだ

スクリプトの処理の流れは、まずメニューの位置を調べている。windowがスクロールした際にスクロールした量を調べて、そのスクロール量をanimateで動くようにしている、というシンプルなものだ。durationの値を変えることで移動にかかる時間をミリ秒もしくはキーワードで指定することが可能だ。