イナヅマTVログ

【覚え書き】No JavaScript!, IE 6でposition:fixedをエミュレートする

| 0件のコメント

ブラウザができないことをできるようにしようとすると、ほぼどっかで破綻することの多いWeb界隈の「できるよ」ネタ。
某翻訳サイトの「できる」「便利」ネタを鵜呑みにして酷い目にあった人も少なくないかと…

ブラウザが本来できないことを実現するためには何らかのScriptを投入する必要があります。
Script実行結果はHTML構造とか設定CSSから影響を受けるので100%な動作を保証されるものではありません。
今回のネタもそんな「できたことはあった」けど「必ずできるとは言いにくい」不確実なものです。

window下端にheightが100pxのDOMElement(CSS class .sticky)をfixed配置しようとしています。
CSS.

/* modern Browser */
.sticky {
    position: fixed;
    bottom: 0;
}
/* IE 6 */
* html .sticky {
    position: absolute;
    top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-100));
}

JS.(jQueryを使用しています)

$( document ).ready( function (){
    $( 'html' ).css( {
        'background-image': 'url(null)',
        'background-attachment': 'fixed'
    } );
} );

こんな感じでゴニョゴニョすると.stickyはwindow下端に張り付いたように見えます。

JS部分は「IE6 でガタつかない position:fixed をさせるための詳細条件を調べてみた」で知りました。
こちらにはCSSのexpressionサンプルもあります。
最初からここ見れば時間はかからなかったのに。

CSSの設定だけだとスクロールの時にfixedさせたいDOMElementがガタガタ動いてしまいます。

update 2014-02-26
冷静になってよーく考えるとJavaScript使う必要ありませんでした。

/* IE 6 */
* html .sticky {
    position: absolute;
    top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-100));
}
* html {
    background-attachment: fixed;
    background-image: url(null);
}

つーことでタイトルに”No JavaScript”を追記しました。

コメントを残す