position:fixedを使ってヘッダを固定した場合、
リンクタグでidを振ってあるところにページ内リンクで移動すると
位置がずれてタイトルなどが見えなくなってしまいます。
今回はその対処法を書きます。
方法は２つ。CSSで調整する方法と、JavaScriptで調整する方法があります。
【HTML】
|
1 2 3 4 5 6 7 |
<div id="header"> ヘッダーが部分 </div> <div id="content"> <a href="#link01">ナビ</a> <div name="link01" id="link01">リンク先</div> </div> |
CSSで調整する
padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。
margin-top:-100px;
padding-top:100px;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#header { width: 100%; min-width: 960px; height: 100px; position: fixed; left:0; top:0; z-index: 10; } #content{ padding-top: 100px; } #link01 { margin-top:-100px; padding-top:100px; } |
JavaScriptで調整する
ヘッダの高さ分、ページTOPの位置をずらして移動します。
※jQueryを使用しています。
|
1 2 3 4 5 6 7 8 9 10 |
$(function () { var headerHight = 100; //ヘッダの高さ $('a[href^=#]').click(function(){ var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす $("html, body").animate({scrollTop:position}, 550, "swing"); return false; }); }); |
よくやりがちなので覚書でした。こういう細かいところにも気を配れるといいですね。