【おやじのweb技】 html/javascript/css等
winXP+IE6
TopPage表示 /  保 存 /  印 刷 /  Window Resize /  Window Close

g013

ウィンドウをスクロールしても画像や文字(オブジェクト)は動かない(固定)

web工房  Copyright(C) 2004 web工房 All Rights Reserved 
このページのトップに戻る /  Window Resize /  Window Close /  最終更新日表示

action


ウィンドウをスクロールしても画像等のオブジェクトの表示位置は変わりません
[サンプル(1)] (右上)画像をクリックするとウィンドウの大きさが変わります
[サンプル(2)] (右下)現在の年月日時刻を表示しています(秒単位)
[サンプル(3)] (左上)説明文をコメント風に表示しています
[サンプル(4)] (左下)ウィンドウのスクロール量を表示しています

web技

◆手順1【オブジェクトを表示するエリアの設置】
※オブジェクトを表示するエリアには<div>〜</div>を用います
※<div〜>のstyle属性は、position:absolute;以外は状況に合わせて変更して下さい

[サンプル1:(右上)画像]
※画像をクリックするとスクリプトWin_Resizeto()"を実行します
-----次の行から(copy)-----
<div id="position_Obj" style="position:absolute;">
<a href="javascript://" onclick="Win_Resizeto()">
<img src="photo/windowresize.gif" width="100" height="24" align="middle" border="0"></a>
</div>
-----上の行まで(copy)-----

[サンプル2:(右下)現在の年月日時刻]
※表示位置固定の他、時刻表示のスクリプトも起動しており、ここに時刻を書き込みます
-----次の行から(copy)-----
<div id="position_Obj2"
 style="position:absolute;width:200;font-weight:bold;text-align:center;border-color:#ff00ff;border-style:double;border-width:3;">
-----上の行まで(copy)-----

[サンプル3:(左上)説明文をコメント風に]
-----次の行から(copy)-----
<div id="position_Obj3" style="position:absolute;width:400;color:#ff0000;background-color:#8080ff;font-size:10;text-align:center;filter:alpha(opacity=60);">
スクロールしても画像等のオブジェクトの表示位置が固定化されています</div>
-----上の行まで(copy)-----

[サンプル4:(左下)ウィンドウのスクロール量]
※スクリプトで移動量を書き込みます
-----次の行から(copy)-----
<div id="position_Obj4" style="position:absolute;width:200;color:#ff0000;font-size:14;">
-----上の行まで(copy)-----

◆手順2【スクリプトの実行】
※<body〜>に記述します(オープン時起動)
※4つのサンプル表示をすべて実行しています

-----次の行から(copy)-----
<body onload="Obj_PositionXY();Obj_PositionXY2();Obj_PositionXY3();Obj_PositionXY4();">
-----上の行まで(copy)-----

◆手順3【スクリプト】
※全サンプルのスクリプトを掲載しています

[サンプル1:(右上)画像]
※右端(right)・上端(top)からの距離(px)で位置を決めています
※setTimeoutを使用し一定時間間隔(1秒=1000)でスクリプトを再実行しています(他のスクリプトも同じ)

-----次の行から(copy)-----
function Obj_PositionXY() {
 X_int=50;  //ウィンドウ右端からの画像の最初の位置(px)
 Y_int=10;  //ウィンドウ上端からの画像の最初の位置(px)

 document.all["position_Obj"].style.right=X_int+document.body.scrollLeft;
 document.all["position_Obj"].style.top=Y_int+document.body.scrollTop;

 setTimeout("Obj_PositionXY()",500);
}
-----上の行まで(copy)-----

[サンプル2:(右下)現在の年月日時刻]
※右端(right)・下端(bottom)からの距離(px)で位置を決めています
※bottomの場合はスクロール量の補正は行いません
※現在時刻はinnerTextを用いて書き込んでいます

-----次の行から(copy)-----
function Obj_PositionXY2() {
 X_int2=20;  //ウィンドウ右端からの画像の最初の位置(px)
 Y_int2=10;  //ウィンドウ下端からの画像の最初の位置(px)
 now=new Date();

 document.all["position_Obj2"].style.right=X_int2+document.body.scrollLeft;
 document.all["position_Obj2"].style.bottom=Y_int2;
 document.all["position_Obj2"].innerText=
   now.getYear() + "." + now.getMonth() + "." + now.getDate() +
   " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();

 setTimeout("Obj_PositionXY2()",500);
}
-----上の行まで(copy)-----

[サンプル3:(左上)説明文をコメント風に]
※左端(left)・上端(top)からの距離(px)で位置を決めています

-----次の行から(copy)-----
function Obj_PositionXY3() {
 X_int3=20;  //ウィンドウ左端からの画像の最初の位置(px)
 Y_int3=70;  //ウィンドウ上端からの画像の最初の位置(px)

 document.all["position_Obj3"].style.left=X_int3+document.body.scrollLeft;
 document.all["position_Obj3"].style.top=Y_int3+document.body.scrollTop;

 setTimeout("Obj_PositionXY3()",500);
}
-----上の行まで(copy)-----

[サンプル4:(左下)ウィンドウのスクロール量]
※左端(left)・下端(bottom)からの距離(px)で位置を決めています
※bottomの場合はスクロール量の補正は行いません

-----次の行から(copy)-----
function Obj_PositionXY4() {
 X_int4=5;  //ウィンドウ左端からの画像の最初の位置(px)
 Y_int4=5;  //ウィンドウ下端からの画像の最初の位置(px)

 document.all["position_Obj4"].style.left=X_int4+document.body.scrollLeft;
 document.all["position_Obj4"].style.bottom=Y_int4;
 document.all["position_Obj4"].innerText=
   "スクロール量(px) X=" + document.body.scrollLeft+" , Y=" + document.body.scrollTop;

 setTimeout("Obj_PositionXY4()",500);
}
-----上の行まで(copy)-----

解説等

◆ウィンドウをスクロールしても常時表示しておきたい場合等に使用します。
◆画像・テキスト・表・フォーム・インナーテスキト・インラインフレーム等のオブジェクト表示が可能です。
※<div>〜</div>間にオブジェクのタグを記述します。
◆スクロール量が大きくて他へリンクすることが多いページなどでメニュー等を表示しておいたら便利だと思います。

【活用技】
◆スクロール量を表示する技は
[技k014]マウスカーソルの位置を検出して座標表示する、を参照して下さい。

keyword

◇scrollLeft◇scrollTop◇event.x

history

◇(2004.10.09)設置

注意

◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----

Window Resize
スクロールしても画像等のオブジェクトの表示位置が固定化されています
access count