ヘッダーを固定した状態でのページ内リンクの位置調整

自分はヘッダー固定のサイトを作ることはあまりないのですが、ヘッダーを固定するサイトって結構ありますよね。ヘッダーにはグローバルメニューを置くことがほとんどなので、ユーザビリティ的にヘッダーを固定するのでしょう。

そんなヘッダーを固定したときに困るのがページ内リンク。ページ内リンクは、縦に長いページ等で使われ、リンクをクリックすると、ブラウザの最上部にリンク先が移動するわけですが、ヘッダーを固定していると、その位置がヘッダーの中めり込んでしまってよくわからない状態になってしまいます。希望としてはヘッダーの最下部にリンク位置が表示されたいですよね。それをcssで簡単に実現します。

以下、サンプルコードです。

ポイントはリンク先となるh2のあしらいになります。
padding-top:100pxでヘッダーの高さ分だけh2の範囲を広げます。margin-top:-100pxで先に広げたpadding-topの分だけ位置を戻します。

見た目の位置は変わりませんが、ブロック要素(h2)の高さが広がったことになり、リンクで移動するとヘッダーのすぐ下にリンク位置が移動するし、ヘッダーにめり込むことがなくなります。

以下はサンプルです。

アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。

  • このエントリーをはてなブックマークに追加
  • Pocket   
  • 5 follow us in feedly
カテゴリー: css
comments powered by Disqus