Web blog WEBブログ

スムーススクロールと固定ヘッダー対策を同時に指定する方法

2019.07.10

こんにちは。コーダーの兼山です。

いつも『fixedヘッダー問題』に悩まされるのですが、
あなたは、どうですか?

もし、思い当たるのなら、今回ご紹介する、
スムーススクロールと固定ヘッダー対策を同時に指定する方法で問題解決してみましょう!

『fixedヘッダー問題』について

ヘッダーをブラウザ上部に固定している場合(ヘッダーをposition:fixedで指定している場合)に起こる事象は、
●ページ内遷移をすると、遷移先がヘッダーに隠れる
●ページ内リンク先へ、ページ外から遷移すると、遷移先がヘッダーに隠れる
このような感じだと思います。

そこで、解決策として、
1. コンテンツ領域へ、CSS「margin-top: -80px; padding-top: 80px;」のようにネガティブマージンを指定する。
この方法は、うまくいかないことが多く、他の部分への影響が出ることも多々あり、デメリットの方が多いと思います。
2. before疑似要素に高さを指定して調整する方法。
これも、1と同じデメリットありです。

などなど、回避方法があるのですが、
最終的にスクリプトで回避するのが一番良いと思います。

スムーススクロールと固定ヘッダー対策

jQueryの読み込みを忘れないようにしてください。

【付録で追記】スクロール状況で表示/非表示を切り替え

このデモは、スクロール状況で表示と非表示を切り替えます。
この場合、上から200px以上スクロールすると、ページトップボタンが表示、
それ以下の場合は、ページトップボタンは非表示にするという指示となります。

先の説明の『スムーススクロールと固定ヘッダー対策』と組み合わせると良いと思います。

まとめ

fixedヘッダー問題については何かと振り回されたものですが、今回の方法は安定感があって使用しやすいと思います。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口