スクロールしてもナビバーだけが固定されるヘッダー

よく見かけるページをスクロールしても
ナビバー部分だけがページ上部に固定され
ヘッダは消えるタイプのナビゲーションの作り方です

<head>~</head>の間に

<script src="./js/jquery3.1.1.min.js" type="text/javascript"></script>
jqueryを読み込んでおく
(このバージョンではちゃんと動いてますが、他のバージョンは試してください)

<div id="header"></div>
ヘッダー画像は普通に作る。お好みのデザインで
その下に
class="navi"
というナビバーを作る。デザインは適当に好みで

cssに
.fixed{
position: fixed;
top:0;
width: 100%;
zindex: 10000;
}
というクラスを作っておく(もちろん各数値は自分用にする。)

最後に以下コードをヘッダの上あたりに入れてOK。

<script type="text/javascript">
$(function() {
var nav = $('.navi');
//navの位置
var navTop = nav.offset().top;
//スクロールするたびに実行
$(window).scroll(function () {
var winTop = $(this).scrollTop();
//スクロール位置がnavの位置より下だったらクラスfixedを追加
if (winTop >= navTop) {
nav.addClass('fixed')
} else if (winTop <= navTop) {
nav.removeClass('fixed')
}
});
});
</script>
記事id:854 / 784PV

関連記事