自分のブログには、グローバルナビゲーションを設置しています。
このグローバルナビゲーションはスクロールしても追従するので、トップページに戻りたい時や、各カテゴリーのページに遷移したい時に便利です。
※以下画像の赤枠部分
便利なのですが、目次のリンクをクリックして対象の見出しにジャンプすると、グローバルナビゲーションと被ってしまいます。
グローバルナビゲーションは2か月以上前に設置したのですが、見出しと被っていたことに今さら気付きました。
厳密には「追従する目次をサイドバーに表示する」対応をしていた時に気づきました。
このままでも良かったのですが、簡単に解消できそうなら対応したいなと思い、ネット検索してみました。
すると簡単に解消できそう、となったのでサクッと対応しました。
ということで、どうやって対応したかを書いていきます。
変更内容（画像）
まずは変更前後の画像（挙動）を貼ります。
目次のリンクをクリックした時の「見出し」と「グローバルナビゲーション」の被り具合に着目して頂ければと。
変更前
変更後
変更前後の挙動はこんな感じです。
変更前は目次のリンクをクリックした時、「見出し」と「グローバルナビゲーション」が被ってしまっています。
問題なく対象の見出しにジャンプ出来てますし、ちょっと上にスクロールすれば見出しを確認できるのですが、ちょっと不便です。
変更後は「見出し」と「グローバルナビゲーション」が被らないようになっています。
参考サイト
以下のサイトを参考にさせて頂きました。ありがとうございます。
sologaku.comqiita.com
適用したCSS
/***アンカーリンクのリンク先の余白調整***/ html { scroll-padding-top: 40px; } /***アンカーリンクのリンク先の余白調整ここまで***/
上記のCSSを適用すると、目次のリンクをクリックした時の余白が調整されます。
「目次のリンク」と書きましたが、厳密には「ページ内リンク」に適用されます。
適用手順
一応、適用手順を載せておきます。
注意事項
はてなブログで適用したものです。
はてなブログ以外では試してないので、うまく動かない可能性があります。
今使っているSilenceというデザインテーマに追加でCSS適用した形となります。
他のデザインテーマを使っている方や、他にもCSSやJSを埋め込んでいる人はうまく動かない可能性がありますので、もし今回記載のCSSを適用しようとしている方はその辺りご了承ください。
おわりに
ということで、「目次のリンク先とグローバルナビゲーションが被る」に関してアレコレ書いてみました。
最初はグローバルナビゲーションを追従しないように対応しようと思っていました。
追従しなければ、目次のリンク先と被ることもなくなるので。
ただ、追従するのは個人的に便利に感じていました。
なので、追従はそのままで何とかならないか調べてみました。
調べてみて、何とかならなそうなら諦めようかなと。
追従しないように対応しようかなと思っていました。
ですが思ったより簡単に何とかできそう、となったので対応しました。
というか、今回の件を対策できるCSSプロパティ（scroll-padding）があるのを初めて知り、驚きでした。
またなにかブログカスタマイズしたら記事にします。
（追記）
グローバルナビゲーションのデザインを大幅に変更しました（詳細は以下リンク）。
追従しないタイプになったため、今回の記事で触れている内容は根本的に解消しました。
また追従するタイプに変更した場合は、今回の記事の内容を再適用する予定です。
miya-moto-memo.hatenablog.com
関連記事
グローバルナビゲーションの関連記事をまとめました。
気になる記事があればぜひ。
