CSSでヘッダーを固定にした時にページ内リンクがずれる、の対処法

8 / 18 / 2011
* html body {
background: url(null) fixed;
}

#header {
    width: 100%;
    height: 50px;
    position: fixed;
    top:0;
    left:0;
}

* html #header {
    position: absolute;
    top: expression(eval(document.documentElement.scrollTop+0));
}

CSSでヘッダーを固定にするのはこんな感じですね。で、このままだとページ内リンクがずれますので、

<h2 name="sec1" id="sec1">sec1</h2>
<p>ほげ</p>
<h2 name="sec1" id="sec1">sec2</h2>
<p>ほげ</p>
<h2 name="sec1" id="sec1">sec3</h2>
<p>ほげ</p>

<ul>
<li><a href="#sec1">sec1</a></li>
<li><a href="#sec2">sec2</a></li>
<li><a href="#sec3">sec3</a></li>
</ul>

みたいなHTMLなら

h2 {
    padding-top:70px;
    margin-top:-70px;
}

とやるといい具合になります。

Tags:

コメントする

About this entry

CSSでヘッダーを固定にした時にページ内リンクがずれる、の対処法

Posted in 8 / 18 / 2011

Tags:

Share

Bookmark