アイテムをページの右端に固定表示する。

CSSでページの右端にアイテムを固定し表示するためのTips。
少しコツが必要だったので。


サンプルはこのページ。

右の方にあるアニメーションGIFは固定されていて、
ページをスクロールしても動きません。
恒常的に見せるメニューやリンクなどで活用できるかと。



必要なコード

対象のオブジェクトに以下のCSSを適用させることで実現できます。

position:fixed;
right:0;
top:0;


ただし、InternetExplorer6およびそれ以前のブラウザでは上手く動きません。

それは、InternetExplorer6がposition: fixedに対応していないためです。
右端に寄せるだけであれば、position: absoluteで問題ないのですが、
スクロールに対して固定させるとなるともう一工夫が必要です。



InternetExplorer6対策にはfixed.jsを使う

他にも色々方法はあると思いますが、JavaScriptを使用することが許されているのであれば、
fixed.jsを使用するのが一番楽です。

doxdesk.com: software: fixed.js

このライブラリを貼り付けると、InternetExplorer5-6において、
position: fixedが有効になります。
(JavaScriptでエミュレーションしてるんでしょう、きっと)

導入は非常に簡単で、適当な場所においてHTML内に以下の記述を書くだけ。



ページの構成によっては、
position: fixedが有効になるのにタイムラグが生じる場合もありますが、
読み込み順を早くしたり、ロード時に表示されないページ下部に配置するなどで、
調整してみてください。

とりあえず、prototype.jsやliteboxなどとは衝突せずに動くようです。



問題の無かった構成。
(prototype.js系のみ。jQueryなどは調べてません)