[CSS]IE6にposition:fixedを対応させる方法

CSS

2012.07.292024.09.01

CSSの position:fixed を利用することで要素を固定させることができます。

例えば「ヘッダーをページ上部に固定させる」「サイドメニューを固定させる」などなど。

しかしCSSのposition:fixedがIE6には対応していないので、Fixed positioningというjavascript のお世話になることにします。

Fixed positioning のダウンロード
Fixed positioning の設置

Fixed positioning のダウンロード

以下のページからFixed positioningをダウンロードします。
Fixed positioning

Fixed positioning の設置

<head>内にfixed.jsを設置するだけでIE6でもposition:fixedが効くようになります。

しかし、ここでもうひと処理。。。

fixed.jsファイルを設置しただけではIE6でページをスクロールするとガタガタするので、以下のようなCSSの記述も同時に書いてあげます。

<!--[if lte IE 6]>  
<script type="text/javascript" src="fixed.js"></script>
<script type="text/javascript">
$('html').css({
    'background-image':'url(null)',
    'background-attachment':'fixed'
});
</script>
<![endif]-->