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

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

<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 / 75PV

関連記事