ブログやホームページのグローバルナビをスクロール時にトップ固定する方法

ブログやホームページにおいて、グローバルナビを使用している人も多いと思います。

スクロールして、グローバルナビが消えてしまい、またスクロールを戻すのが面倒くさく感じる場合にトップで固定させてしまえば便利ではないかと思います。

今回は、グローバルナビのトップ固定の方法について書きたいと思います。

HTML

グローバルナビ部分を下記のように作成します。

<div id="menu" class="nav">
  <ul>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
  </ul>
</div>

CSS

CSSを下記のように記載して固定します。

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

jQuery

headタグ内に下記のコードを記載します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"/>
<script type="text/javascript">
jQuery(function($) {
  
var nav    = $('#menu'),
    offset = nav.offset();
  
$(window).scroll(function () {
  if($(window).scrollTop() > offset.top) {
    nav.addClass('fixed');
  } else {
    nav.removeClass('fixed');
  }
});
  
});
</script>

コードの意味を簡単に説明すると、menuというIDがある要素がトップの位置に来た時、fixedというクラスを付与し、トップの位置でなくなればfixedというクラスを削除するというものです。

HTMLファイルの記載例

上記を踏まえて、HTMLファイルを作成する場合、下記のようになります。

<html>
<head>
<style>
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"/>
<script type="text/javascript">
jQuery(function($) {
  
var nav    = $('#menu'),
    offset = nav.offset();
  
$(window).scroll(function () {
  if($(window).scrollTop() > offset.top) {
    nav.addClass('fixed');
  } else {
    nav.removeClass('fixed');
  }
});
  
});
</script>
<title>タイトル</title>
</head>
<body>
<!--タイトル画像ｅｔｃ．を記載-->
<div id="menu" class="nav">
  <ul>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
  </ul>
</div>
<!--ページの内容を記載-->
</body>
</html>

以上、参考にしていただけたら幸いです。