スクロールしてもナビバーだけが固定されるヘッダー
よく見かけるページをスクロールしても
ナビバー部分だけがページ上部に固定され
ヘッダは消えるタイプのナビゲーションの作り方です
<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 / 6945PV
関連記事
