ヘッダーにナビゲーションなどを固定するスタイルは最近良くみかけますよね。
私自身も何回か制作しました。
その時にちょっと手こずったのが、アンカーの位置がずれてしまうこと。
|
1 2 3 4 |
<div id="header">ヘッダー 固定・スクロールしない</div> <div id="container"> <div id="content1">コンテンツ</div> </div> |
ページ内の#content1にリンクさせるときは
<a href=”#content1″>コンテンツ</a>としますが、それだと
ページ内の特定のアンカー位置に飛ばしたいのに、固定されている要素分だけずれてしまって、見えなくなる。。。
解決してくれるサイトがありました。
LIG INC. Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと
http://liginc.co.jp/web/js/jquery/80140
|
1 2 3 4 |
#content1{ margin-top:-60px; padding-top:60px; } |
固定したヘッダーの高さ分のネガティブマージンと、打ち消し用のパッディングを設定します。
でもこれだけでは解決しないことが。
IE11,Firefoxでは大丈夫なのに、Chromeでは効いていない。。。
javascript で調整するも・・・ダメ
|
1 2 3 4 5 6 7 8 9 10 |
$(function () { var headerHeight = 60; //ヘッダーの高さ $('a[href^=#]').click(function(){ var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top-headerHeight; $("html, body").animate({scrollTop:position}, 500, "swing"); return false; }); }); |
下記サイトを参考にしてdisplay:inline-blockを追記。
|
1 2 3 4 5 |
#content1{ margin-top:-60px; padding-top:60px; display:inline-block; } |
これでchromeでもOKになったけれど、display:inline-blockのおかげで６０px分の余白が・・・
この解決方法はまだ未確認です。。。
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/
ヘッダを固定するときは、アンカー位置ズレに要注意です。
