画面上部で固定ナビゲーション使用時、アンカーリンクで飛ばしたリンク先がナビゲーションの下に隠れて表示されるので、その対応方法を考えてみました。
サンプル
文章だけだとイメージし辛いと思いますので
サンプルページでどのようになるか試して見て下さい。
サンプルページでどのようになるか試して見て下さい。
対応方法について
jQueryで対応すると別ページへのアンカーリンクの対応が面倒なのでHTMLとCSSで対応します。
HTMLの修正
コンテンツ枠を記述している下記の内側に<span>を追加します。
（ id=”box6″のDIV要素まで同様に追加します ）
【変更前】
<div id="box1">コンテンツ1 <a href="#top">ページのトップへ</a> </div>
【変更後】
<div id="box1"> <span> コンテンツ1<a href="#top">ページのトップへ</a> </span> </div>
CSSの修正
【変更前】
#content div {
clear:both;
display:block;
font-size:1.3em;
height:230px;
margin:0 auto 400px;
padding:170px 0 0 0;
text-align:center;
width:650px;
}
#content div a{
display:block;
padding:0;
}
#box1,
#box3,
#box5 {
background-color: #B9AA7D;
}
#box2,
#box4 {
background-color:#E2E3CE;
}
【変更後】
#content div{
padding:170px 0 0 0;
margin:-170px 0 0 0;
}
#content div span {
clear:both;
display:block;
font-size:1.3em;
height:230px;
padding:170px 0 0 0;
margin:0 auto 400px;
width:650px;
text-align:center;
}
#content div span a{
display:block;
padding:0;
}
#box1 span,
#box3 span,
#box5 span {
background-color: #B9AA7D;
}
#box2 span,
#box4 span {
background-color:#E2E3CE;
}
#content div のpadding指定で任意の高さ分ずらします。
只、paddingの指定だけだとレイアウトがくずれるためmarginにpaddingでずらした分だけマイナスの値を入れます。次に、div の内側に指定したspan にwidthや色指定を移行します。
以上
これで、思った動きになりました。
固定メニュー使用時にアンカーリンクを使う場合のご参考になればと思います。
固定メニュー使用時にアンカーリンクを使う場合のご参考になればと思います。