MK2-BLOG~西宮のWEBデザイナー日記

女性WEBデザイナーの日記、WEB制作に関連すること

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

time 2017/03/06

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

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

sponsored link

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が付いたら文字を太字にする、背景色を変えるなど様々なカスタマイズができそうです。

にほんブログ村 デザインブログ Webデザインへ
↑ブログランキングに参加しています♪よかったらクリックしてくださいね

sponsored link

マウスコンピューター/G-Tune

アーカイブ

スポンサードリンク