IE-position-fixed
IEでも擬似的に position:fixed; 風になるようなJavaScript。 画面右下の画像がそれ。
これよりも、
expression()(ダイナミックプロパティ) を使った
仮想-position:fixed
を使った方が、スムーズに fixed されるみたいです。
source
- ページのどこか(<head>内とか)に次のように書きます。
<script type="text/javascript"><!-- // ie-position-fixed function iefixed(p0,p1,p2,p3,p4){ var d = document; if(d.all && !window.opera && d.all(p0)){ var ds = d.all(p0).style; ds.position='absolute'; if(p1){ ds.top=d.body.scrollTop+'px'; ds.bottom='auto'; } if(p2){ ds.right='1px'; ds.right='0px'; ds.left='auto'; } if(p3){ ds.bottom='1px'; ds.bottom='0px'; ds.top='auto'; } if(p4){ ds.left=d.body.scrollLeft+'px'; ds.right='auto'; } } } // --></script>
- <body>タグ内に次のように書きます。
-
<body onscroll="iefixed('menus',1,0,0,1)" onload="iefixed('menus',1,0,0,1)">
- position:fixed させたい段落に、IDを指定します。
-
<div id="menus""> 〜なんかのソース </div>
IDの名前(menus)は何でもいいです。 好きなように。
- IE以外のブラウザの場合では普通なので、スタイルシートは次のように書きます。
-
<style type="text/css"><!-- #menus { position:fixed; top:0px; left:0px; z-index:2; } --></style>
top や left の値(0px)は何でもいいです。 好きなように。
下に寄せたいときは bottom , 右に寄せたいときは right , を代わりに使います。
以上
note
デフォルトでは、fixed できる場所はページの四隅です。
BODYタグ内の
iefixed('menus',1,0,0,1)
のところで操作してください。
iefixed('menus',top,right,bottom,left)
です。
- 左上
iefixed('menus',1,0,0,1)
- 右上
iefixed('menus',1,1,0,0)
- 右下
iefixed('menus',0,1,1,0)
- 左下
iefixed('menus',0,0,1,1)
四隅以外にしたい場合は、JSのところを適当にいじってみてください。
書き方は・・・、自分で勉強してくださいw
例えば 座標
(left,top) = (5px,20px)
の位置に固定したい場合は、
if(p1){ ds.top=d.body.scrollTop+20+'px'; ds.bottom='auto'; }
こんな感じでしょうか。
〜略〜
if(p4){ ds.left=d.body.scrollLeft+5+'px'; ds.right='auto'; }
memo
JS-Off だと全然使えません。
ちょっと考慮するなら、スタイルシートのとことBODYタグの中を変えた方がいいかも。
具体的には、
stylesheet
#menus { position:fixed;
top:0px; left:0px; z-index:2; }
↓
#menus { position:absolute;
top:0px; left:0px; z-index:2; }
* > #menus { position:fixed; } /*IE以外用*/
body-tag
<body onscroll="iefixed('menus',1,0,0,1)"
onload="iefixed('menus',1,0,0,1)">
↓
<body onscroll="iefixed('menus',1,0,0,1)">
こうすると、JS-Off でも最初にページ読み込んだときに限って、ちゃんと四隅になります。
「 * > #menus
」の意味がわからないと説明が面倒だし、
そもそも裏テクなので、補足扱いですが。
こっちのが推奨です本当は。
「"子セレクタ"って何?」 って勉強したらすぐわかるんですけど。