グローバルナビを上部に固定してスクロールする小さくする2つのポイント

time 2017/03/06

最近スマホ対応を標準で行っているMK2-STYLEです。レスポンシブ、スマホ対応は当たり前の時代になってきました。
そこで最近よく見かけるグローバルナビが上に固定されて、スクロールすると少し小さくなる方法を備忘録としてメモ。
コンテンツが長くなると、ナビゲーションを見るためにいちいち上に戻らないといけないのは面倒です。
なので、ナビゲーションは常に上部分に固定されている方が便利ですよね。

DEMO

こんな風にスクロールすると小さくなるナビが2か所記述するだけで実装できちゃいます。

HTML記述方法

＜head＞＜/head＞内にjQueryとjavascriptを記述

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
	var nav = $('.navi'),
	offset = nav.offset();
	$(window).scroll(function () {
	  if($(window).scrollTop() > offset.top) {
	    nav.addClass('fixed');
	  } else {
	    nav.removeClass('fixed');
	  }
	});
});
</script>
</head>
<body>
<div class="navi">
	<ul>
		<li><a href="#">Menu1</a></li>
		<li><a href="#">Menu2</a></li>
		<li><a href="#">Menu3</a></li>
		<li><a href="#">Menu4</a></li>
		<li><a href="#">Menu5</a></li>
	</ul>
</div></body>

.naviのところはナビゲーションにつけたクラスを入れてください。
もちろんクラスじゃない場合はIDでも可。

CSS記述方法

CSSでナビゲーションのスタイルと、スクロールするを小さくなるように記述します。
上のscriptでスクロールすると.fixedというクラスがnaviに付きますので、それを利用します。

<style type="text/css">
.navi{
width: 100%;
background:#333;
}
.navi ul li a{
	background:#666;
	width: 20%;
	float: left;
	padding:20px 0;
	text-align: center;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #777;
	box-sizing: border-box;
}
.navi ul li a:hover{
	background:#333;
}
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}
.navi.fixed ul li a{padding: 8px 0;}
</style>

naviに.fixedというclassが付いたらナビゲーションの高さを小さくしてやればいいと思います。
もし、画像でナビゲーションを作っている場合は面倒ですが、ナビゲーション画像を背景にして
.fixedが付いたら画像を変える指定をしてください。
これと同じように.fixedのclassが付いたら文字を太字にする、背景色を変えるなど様々なカスタマイズができそうです。