ブラウザができないことをできるようにしようとすると、ほぼどっかで破綻することの多い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”を追記しました。