【JQuery】スクロール途中でグローバルナビなどの要素を固定する方法

今回はCSSとjQueryを使ってグローバルナビがトップに来た時に、固定をしてスクロールをしても追従(？)させる方法を記録します。

Webの仕事に関わり始めたばかりなのに、いきなりJQueryのことを書くとは思いませんでしたが、今後よく使いそうな匂いがプンプンしますので記載して損無し！

正直現在は「JQuery？なにそれ」状態ですが、仕事で作成したサイトでこの方法を使用したので今後のためにもしっかり備忘録を残します！

1.グローバルナビの作成

HTMLを記述

まずはグローバルナビを作成するためのhtmlコードを記述します。

<div id="globalnavi">
	<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>

ＣＳＳを記述

ナビの形をCSSで整えます。

#globalnavi{
	width: 100%;
	height: 70px;
	margin:0 auto;
}
#globalnavi ul li{
	float: left;
	width: 20%;
	text-align: center;
	list-style: none;
	background: #333;
}

#globalnavi ul li a{
	line-height: 70px;
	display: block;
	text-decoration: none;
	color: #fff;
}
#globalnavi ul li a:hover{
	background:#555;
}

2.jQuery本体の読み込みとscriptの記述

JQueryを読み込むためのコードをhead内に記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
  
var nav    = $('#globalnavi'),　　//変数「nav」にglobalnaviを代入
    offset = nav.offset();
  
$(window).scroll(function () {
  if($(window).scrollTop() > offset.top) {　　//位置情報。この場合「トップに来た時」
    nav.addClass('fixed');　　//「fixed」というクラスをつける
  } else {
    nav.removeClass('fixed');　　//トップじゃない時は「fixed」というクラスを削除
  }
});
  
});
</script>

5行目の「nav」内は１の工程で作成したナビのクラスまたはid名を記入してください。

4.CSSに固定するためのコードを記述

jQueryで指定した「TOPに来た時に切り替わるクラス」に固定するためのCSSを記述します。こちらの入力を忘れると固定がされないのでご注意ください。

.fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}