コンサルのこと

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

2018/06/21
 
この記事を書いている人 - WRITER -

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

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;
}

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

この記事を書いている人 - WRITER -

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Copyright© コンサル , 2017 All Rights Reserved.