たった15秒でメニューをスティッキーにする方法

今日は、たった15秒でホームページのメニューを上部にピッタリくっつける方法をご紹介します。
最近「プレーンにウェブを作ろう」と思っていたら、やたらページ数が増えて動線の再設定が必要とされる事案がありました。
この手法を知っておくと、ユーザビリティが高まり、ページ循環率も上昇します。つまり、動線の設計はＳＥＯにもなるという奥深い論点が含まれるわけですが、まずはとりあえずやってみましょう。

デザイン変更にともない、記事との整合性は一部失われていますが、コードは動きますのでそのまま掲載を継続します。

デモサイト

デモサイトなど作る時間がありませんでしたので、このサイト自身をデモにしました。パソコンからご覧になって、画面を下にスクロールすると、メニューが上にピタッと張り付くはずです。なお、ＩＥ７以下では、この機能は動作しないように設定しています。

考え方

考え方は簡単です。要素が指定位置（今回は画面上部）に来れば、jQueryでクラスを動的に付与して、そのクラスにスタイルをつけただけです。

jquery

<script type="text/javascript">
jQuery(function($){
	var stickyNavTop = $('#secondary-menu').offset().top;  
	var stickyNav = function(){  
		var scrollTop = $(window).scrollTop();  
       if (scrollTop > stickyNavTop) {   
    		$('#secondary-menu').addClass('sticky');  
		} else {  
    		$('#secondary-menu').removeClass('sticky');   
		}
	};
	stickyNav();  
	$(window).scroll(function() { stickyNav();
	});
}); 
</script>

このウェブの場合、メインのナビゲーションは＜div id=”secondary-menu”＞でマークアップされていますので、要素指定は’#secondary-menu’となっています。老婆心ですが、貼り付けたいナビゲーションをマークアップしている要素を確認してこの部分（３カ所）を変更してください。クラスが指定されている場合はクラスで指定します。例えば＜div class=”hogehoge”>の場合は’.hogehoge’となる訳ですね。なお、記述は全て半角です。

CSS

<style>
#secondary-menu.sticky {
	background:#FFF;
	border-top: 0
	;box-shadow: 1px 2px 3px 1px #7E7E7E;
	-webkit-box-shadow: 1px 2px 3px 1px #7E7E7E;
	-moz-box-shadow: 1px 2px 3px 1px #7E7E7E;
	left: 0;
	top: 0;
	position: fixed;
	*position: relative;
	width: 100%;
	z-index:9000;
} 
</style>

ポジションでCSSハックを使っていますが、この理由はIE7で動作確認ができていないためです。ですので、IE7では、機能しません。影なんかは適当です。

このパートも、CSSパスはご自身のマークアップに合わせて変更する必要があります。

まとめ

スティッキーなメニューはユーザーの利便性を高めることができます。スクリプトは簡単で、しかも外部に記述せず、ヘッダ内に直接書き込んでも動きます。このウェブでも直接記述していますので、ソースをご覧頂いてコピーしてお試しください。ただし、そのままコピーしても動きません。少なくともjQuery３カ所とCSS一カ所の４カ所を書き換える必要があります。また、念のために申し上げますと、jQueryを読み込んでなければ動きません。

公益性を考えて直接スクリプトを書き込むスティッキーな行政書士の心意気に対し、是非清き「いいね！」の一票をお願いします。

追記：2014年4月4日、ヘッダの読み込みエラーが頻発していることを受け、直接書き込んでいたスクリプトを削除しました。投稿中のスクリプトを適宜変更すれば、ちゃんと動作します。