こんにちは。
新米コーダーです。

コーディングを初めて1年が過ぎ、そろそろ新米とは言えなくなってきたので、新米と名乗るのは今回で終わりにしようと思います！
新米卒業の最後の記事は、スクロールすると上のほうにぴたっとくっついて、常に表示されるナビについてご紹介してみます！
難しいように見えて意外と簡単なので、初心者の方も是非チャレンジしてみて下さい。

ヘッダを準備する

今回は以下のボタンを、スクロールすると常に上部に表示されるようにしてみたいと思います。
まずは普通のナビゲーションを作ります。

【html】

<div class="globalNav">
<ul>
<li><a href="#">ぼたん1</a></li><li><a href="#">ぼたん2</a></li><li><a href="#">ぼたん3</a></li>
</ul>
</div>

【css】

.globalNav {
width: 400px;
margin: 0 auto 60px;
background: #00a0e9;
text-align: center;
}
.globalNav li {
list-style: none;
display: inline-block;
}
.globalNav li a {
text-decoration: none;
font-size: 16px;
color: #fff;
padding: 15px 30px;
display: block;
}
.globalNav li a:hover {
background: #028ece;
}

固定表示させる

次に、cssで固定表示を指定し、固定時のナビゲーションのスタイルを設定します。

ここで、「fixed」というclassが付いたとき、上にくっつく仕様にしたいと思うので、
.fixedに固定時のスタイルを指定します。
position: fixed;、top: 0;で常に上部に固定表示されるようになります。
上にくっついたときは、少し小さくして横幅いっぱいになるようにしてみました。

【css】

.globalNav.fixed li a{
font-size: 13px;
padding: 10px 20px;
}
.globalNav.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

スクロールすると表示されるようにする

最後に、先ほどくっつけたナビゲーションを、スクロールをすると出てくるようにします。
ここではjQueryを使用しますので、まずはjQueryを読み込ませて下さい。
読み込ませ方についてはこちらの記事「【セミナーレポート】 新米コーダーがjQuery初心者向け勉強会に参加してきた」を是非ご覧下さいね！
そして、読み込ませたすぐ下～<HEAD>内に以下の記述をします。

【jQuery】

<script type="text/javascript">
$(function() {
var nav = $('.globalNav');
var navTop = nav.offset().top;
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= navTop) {
nav.addClass('fixed')
} else if (winTop <= navTop) {
nav.removeClass('fixed')
}
});
});
</script>

ここでは、以下の関数を使用することで座標位置を取得することができるのです。

  • scrollTop()　
    現在のスクロール上の上位置を取得する（スクロールの位置）
  • offset().top
    ドキュメント上での表示位置を返す（グローバルナビの位置）

スクロール「scrollTop()」がグローバルナビ「offset().top」よりも下に移動したとき、 globalNav 要素に「.fixed」が追加され、固定表示されるというわけです。
意外と簡単にできちゃいますね！

最後に

いかがでしょうか。
グローバルナビなどは常に表示されていると使いやすいですよね。
是非試してみて下さい！

お問い合わせ