position:fixed 利用時のアンカーの位置がずれるのを解決

ヘッダーにナビゲーションなどを固定するスタイルは最近良くみかけますよね。
私自身も何回か制作しました。
その時にちょっと手こずったのが、アンカーの位置がずれてしまうこと。

ページ内の#content1にリンクさせるときは
<a href=”#content1″>コンテンツ</a>としますが、それだと
ページ内の特定のアンカー位置に飛ばしたいのに、固定されている要素分だけずれてしまって、見えなくなる。。。

解決してくれるサイトがありました。

LIG INC.  Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと
http://liginc.co.jp/web/js/jquery/80140

固定したヘッダーの高さ分のネガティブマージンと、打ち消し用のパッディングを設定します。

でもこれだけでは解決しないことが。
IE11,Firefoxでは大丈夫なのに、Chromeでは効いていない。。。

javascript で調整するも・・・ダメ

 
下記サイトを参考にしてdisplay:inline-blockを追記。

これでchromeでもOKになったけれど、display:inline-blockのおかげで60px分の余白が・・・
この解決方法はまだ未確認です。。。

wordpress固定ヘッダーメニュー時の、別ページアンカーリンクではまったメモ
http://www9377uo.sakura.ne.jp/sakura/wordpress%E5%9B%BA%E5%AE%9A%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E6%99%82%E3%81%AE%E3%80%81%E5%88%A5%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%A2/

ヘッダを固定するときは、アンカー位置ズレに要注意です。

SNSでもご購読できます。