少しコツが必要だったので。
サンプルはこのページ。
右の方にあるアニメーション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などは調べてません)
- prototype.js
- tabMaker.js
- litebox.js
- moo.fx.js(Litebox同梱)
- ibox.js