『スクロールでサイズ変動する』ヘッダー固定用スクリプト【jQuery】
以前にスクロールしたらサイドバー固定するコピペ用スクリプト【jQuery利用】という記事を書きました。サイドバー固定のスクリプト配布するなら、ヘッダー固定のスクリプトも配布すべきかなぁと思い、記事を書いています。
完成イメージのデモはめっちゃ適当に作りました。
» 『スクロールでサイズ変動する』ヘッダー固定用スクリプトデモ
ちょっと荒業なスクリプトなので、好みに応じでご利用ください。どこが荒業なのかはHTMLをみるとわかるかと思います。
『スクロールでサイズ変動する』ヘッダー固定用のJavaScriptテンプレート
// PC用のヘッダー固定
$(function() {
//ロード or スクロールされると実行
$(window).on('load scroll', function(){
//ヘッダーの高さ分(100px)スクロールするとfixedクラスを追加
if ($(window).scrollTop() > 100 ) {
$('#pc-nav').addClass('navbar-fixed-top');
} else {
//80px以下だとfixedクラスを削除
$('#pc-nav').removeClass('navbar-fixed-top');
}
});
});
『スクロールでサイズ変動する』ヘッダー固定用のHTMLテンプレート
ポイントは同じヘッダーを2箇所に設置している点です。
①は通常のヘッダーを設置します。
②では、サイズ変動後のヘッダーを設置します。
簡単にロジックを説明すると、一定量スクロールされたら、フッター部分に隠されていたサイズ変動後のヘッダーを出現させて、固定しています。こうすることにより、簡単なjQueryでヘッダー固定を実現できます。
※ヘッダーを大きく変化させる時に便利です。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>空っぽのHTMLフレーム</title>
// jQuery読み込み
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<header>
// ①サイズ変動前のヘッダーを設置
</header>
<body>
<main id="main">
// メインコンテンツなどなど
</main>
<footer>
</footer>
<div id="pc-nav">
// ②サイズ変動後のヘッダーを設置
</div>
</body>
</html>『スクロールでサイズ変動する』ヘッダー固定用のCSSテンプレート
.navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
}
以上で完了です。
こうゆうスクリプト書くと真面目なエンジニアには怒られるのかな。。まぁいいや。