A Little Each Day

note to self

JavaScriptでナビバーをスクロール時にトップに固定する方法

こんにちは。本日はスクロールしてページ途中にあるグローバルナビがトップにきたら固定する方法です。

ナビバーがサイト途中部分にあって、上にスクロールするとサイト最上部に固定されるレイアウトのサイトがありますよね。

比較的簡単にできたので一緒に実装方法をみていきましょう。

HTML

まずはhtmlから組んでいきましょう。

今回は以下のようにシンプルなグローバルナビをつくりました。

<div id="nav" class="global-nav">
    <div class="container">
      <div class="nav-left">
        <a class="logo" href="#top">タイトル</a>
      </div>
      <div class="nav-right">
        <ul class="nav-list">
          <li><a href="#link1">リンク1</a></li>
          <li><a href="#link2">リンク2</a></li>
          <li><a href="#link3">リンク3</a></li>
        </ul>
      </div>
    </div>
  </div>


タイトルやリンクがある、ごく普通のグローバルナビです。


CSS

次にcssを書いていきましょう。

/* グローバルナビ */
.global-nav {
  height: 50px;
  width: 100%;
  line-height: 50px;
  background-color: #ffffff;
}

/* ナビ左 */
.nav-left{
  float: left;
}

/* ナビ右 */
.nav-right{
  float: right;
}

/* ナビリスト */
.nav-list li {
  float: left;
  padding: 0 10px;
}


ナビ左にタイトル・ナビ右にナビゲーションリンクがある、ベタなレイアウトです。


ここからいよいよナビゲーションバーを固定するためのcssを書いていきます。

/* ナビ固定 */
.fix-nav {
  z-index: 9999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}
/* ナビ固定時のbodyの余白 */
.fix-body {
  margin-top: 50px;
}


まず「.fix-nav」クラスは、ナビゲーションバーを固定するためのcssとなります。

また「.fix-body」クラスは、ナビゲーションバーを固定したときにバーの高さ分(今回の場合は50px)を空けるというcssとなっています。


JavaScript

それではいよいよJavaScriptを書いていきましょう。

$(function() {

  // グローバルナビの変数宣言
  var $nav = $("#nav");
  var $pos = $nav.offset().top;

  // グローバルナビがトップにきたら固定する
  $(window).on('scroll', function() {
    var fix = ($(this).scrollTop() >= $pos) ? true : false;
    $nav.toggleClass("fix-nav", fix);
    $("body").toggleClass("fix-body", fix);
  });

});


上のコードを簡単に説明すると、

・まず変数宣言
・画面をスクロールして
・ナビバー部分がトップにきたら
・グローバルナビに「fix-nav」クラスを追加
・ボディに「fix-body」クラスを追加

という流れになります。


これでスクロールすると途中でナビバーが固定されるレイアウトになっているはずです。



本日は以上です。