全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
スムーススクロールと固定ヘッダー対策を同時に指定する方法
2019.07.10
※この記事は2019年07月10日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
いつも『fixedヘッダー問題』に悩まされるのですが、
あなたは、どうですか？
もし、思い当たるのなら、今回ご紹介する、
スムーススクロールと固定ヘッダー対策を同時に指定する方法で問題解決してみましょう！
『fixedヘッダー問題』について
ヘッダーをブラウザ上部に固定している場合（ヘッダーをposition:fixedで指定している場合）に起こる事象は、
●ページ内遷移をすると、遷移先がヘッダーに隠れる
●ページ内リンク先へ、ページ外から遷移すると、遷移先がヘッダーに隠れる
このような感じだと思います。
そこで、解決策として、
1. コンテンツ領域へ、CSS「margin-top: -80px; padding-top: 80px;」のようにネガティブマージンを指定する。
この方法は、うまくいかないことが多く、他の部分への影響が出ることも多々あり、デメリットの方が多いと思います。
2. before疑似要素に高さを指定して調整する方法。
これも、1と同じデメリットありです。
などなど、回避方法があるのですが、
最終的にスクリプトで回避するのが一番良いと思います。
スムーススクロールと固定ヘッダー対策
【付録で追記】スクロール状況で表示／非表示を切り替え
このデモは、スクロール状況で表示と非表示を切り替えます。
この場合、上から200px以上スクロールすると、ページトップボタンが表示、
それ以下の場合は、ページトップボタンは非表示にするという指示となります。
先の説明の『スムーススクロールと固定ヘッダー対策』と組み合わせると良いと思います。
まとめ
fixedヘッダー問題については何かと振り回されたものですが、今回の方法は安定感があって使用しやすいと思います。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…
