[CSS]IE6に position:fixed を対応させる方法｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

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

スポンサード

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

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

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

1 Fixed positioning のダウンロード
2 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]-->

参考ページ
position:fixedのIE6対策

スポンサード