2017/10/24

わずか3行でヘッダーをスライドして固定表示にする方法

ヘッダーを一定量スクロールで固定表示させるやり方をメモ書き

PCやスマホでヘッダーを固定表示させるにはcssで position:fixed を指定してあげると指定した要素が固定表示になるのですが、ヘッダー内のナビゲーション部分だけ固定にしたい場合などは、3行コードを書くだけで簡単に実装できます。

実装方法

ヘッダー内にコードを記載

<script>
$(window).on('scroll', function() {
$('#gnavi).toggleClass('fixed', $(this).scrollTop() > 60);
});
</script>

60pxスライドすると、#gnaviにclass(fixed)を付けるという指示

#gnaviの部分は固定したい要素に名前を変更

> 60 の数値を変えるとスライドさせる量を変更

後は、class .fixedのときのcssを書きます。

.fixed {
position:fixed;top:0;
}

こちらの記事を参考にしています。
参考 : スクロールしたらヘッダーの一部だけ固定する