エレメントの位置固定

JavaScript DOM

よくJavaScriptでスクロールしても同じ位置にエレメントを固定させているテクがあり実装されているところも少なくない。でも僕はあんまり好きではない。というのもスクロールさせたさいに”チラツク”から嫌いです。ちらつかなければな…と思いこんなコードを実装してみた。ちらつくのが嫌なので是非ちらつかないコードを実装して欲しいです。

一般的だと思うコード(ちらつきコード)

window.onscrollを利用してイベント発生のつど書き直している。サンプルページ → http://www.starmsg.net/misc/2006/09/190309.html。はやくスクロールさせればさせるほどちらつく。

<style type="text/css">
#fixed
{
    position: absolute;
    top: 300px; left: 64px;
    width: 100px; height: 100px;
    background-color: #cccccc;
}
</style>

<div id="fixed">fixed</div>

<script type="text/javascript">
var div = function(self)
{
    return {
        setPosition : function(){
            self.style.position = 'absolute';
            self.style.top  = 300 + parseInt(document.documentElement.scrollTop || window.pageXOffset || 0) + 'px';
        }
    };
}(document.getElementById('fixed'));

window.onscroll = function(){ div.setPosition(); };
</script>

ちらつかないコード

Element.style.setExpressionを利用する。サンプルページ → http://www.starmsg.net/misc/2006/09/191809.html

<style type="text/css">
body{ background-attachment: fixed; } // 背景画像再描画によるちらつき軽減できる。
#fixed
{
    position: fixed; // Firefox, Opera (IE7はどう？, Safariは？)
    top: 100px; left: 100px;
    width: 100px; height: 100px;
}
</style>
<div id="fixed">fixed</div>
<script type="text/javascript">
if(fixed.style.setExpression)
{
    fixed.style.position = 'absolute';
    fixed.style.setExpression("top","100 + parseInt(document.documentElement.scrollTop) + 'px'");
};
</script>

Element.style.setExpressionとCSS

IE限定でこんなCSSが書ける。expressionをJavaScriptでアクセスするにはElement.style.setExpressionを使えばいいみたい。expressionはJavaScriptがオフになっていると動作しないみたいです。個人的にはCSSに直接expressionを利用するとValidateしないのでJavaScriptで操作してほうがいいと思います。

<style type="text/css">
.hoge{
    position: absolute;
    top: expression(eval(document.documentElement.scrollTop));
}
</style>

参考文献

追記

掲載当時では、ちらつかないコードとして紹介していますが、全くちらつかないわけではありませんでした。あるタイミングで再描画しているので若干ちらつく場合もありマシンパワーにも依存しています。ただwindow.onscollを利用するも主観ですがちらつきは抑制されています。(2007/11/03)