メニュー

メニュー

2017年4月17日月曜日

ブログやホームページのグローバルナビをスクロール時にトップ固定する方法 | 日々のメモ帖 by holidaybuggy1980 holidaybuggy1980
300 300

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

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

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

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

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>
<!--タイトル画像etc.を記載-->
<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>


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

0 件のコメント:

コメントを投稿