メニューバーを固定するページを作ってみた-jQuery Sticky

このページのデザインのマイナーチェンジを機に、メニューバーを上部に固定し、スクロール後も隠れないよう設定してみた。

便利な世の中になったもので、この手の機能も配布されているプラグインを使うことで比較的簡単に自分のページに設定することができる。今回、jQueryプラグイン「jquery.sticky.js」を使用してみた。

Sticky Pluginの導入

設定手順は「ページ途中のメニューバーをスクロール後に上端に固定」で解説されているので詳細は割愛するが、実作業は3ステップ、

1. jQuery本体の読み込みを指定する

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>

2. tumblrのテーマアセットとしてアップロードしたjquery.sticky.jsの読み込みを指定する

<script src="jquery.sticky.js へのパス" type="text/javascript"></script>

3. ページの先頭部分で、メニューバーdiv句のidを指定しstickyの関数をcallする

<script type="text/javascript">
	$(window).load(function(){
	   $("#div句のid").sticky({ topSpacing: 0 });
	});
</script>

スクロール時に若干、カクっとした動きをする気がしなくもないが…概ね満足。

レスポンシブ対応へ

ここ半年くらい、少しずつスマートフォン上での表示の最適化を進めている。やっていることは非常にシンプルかつ原始的で、これまで固定値で指定していたページの横幅やフォントサイズを相対値（%指定）で設定し、PC・9インチタブレット・スマートフォンで崩れていないか確認（iPhoneで表示が崩れるっぽいけれど、実機が手元になく把握しきれていない）。その他今回のようにちょっとした部品の追加等。まだまだレスポンシブとは言い難いかもしれないが、ずいぶん整ってきた印象。

まあ、外見（見栄え）よりも、中身（コンテンツ）をもう少し増やしていかないといけないか…