| 解 説 |
スクロールしても常に定位置にメニューを固定するにはスクロールしたら表示座標を計算しなおして再度座標を設定します。スクロールしたかどうかはonscrollイベントで検知できます。どの程度スクロールしたか（スクロール量）は横方向はdocument.body.scrollLeft、縦方向はdocument.body.scrollTopに格納されているので、この値と表示座標を加算します。
|
| コード |
<![CDATA[
<html>
<head>
<title>スクロールしても常に定位置にメニューを固定する</title>
<style type="text/css"><!--
td { font-size:9pt; line-height:150%; background-color:#c9d9f6; }
th { font-size:9pt; line-height:150%; background-color:#000000; color:#FFFFFF; }
--></style>
<script language="JavaScript"><!--
offX = 10; // ←メニューの左からの表示位置
offY = 10; // ←メニューの上からの表示位置
function setMenu()
{
sx = document.body.scrollLeft;
sy = document.body.scrollTop;
fMENU.style.left= sx + offX;
fMENU.style.top = sy + offY;
}
// --></script>
</head>
<body onScroll="setMenu()">
<table border="1" cellspacing="4" cellpadding="0" id="fMENU" style="position:absolute;top:10px;left:10px;">
<tr><th>[[[ MENU ]]]</th></tr>
<tr><td><a href="http://www.impress.co.jp/">■Impress</a></td></tr>
<tr><td><a href="http://www.openspc2.org/" >■OpenSpace</a></td></tr>
<tr><td><a href="http://www.yahoo.co.jp/" >■Yahoo</a></td></tr>
<tr><td><a href="http://www.google.com/" >■Google</a></td></tr>
</table>
<table border="1" width="1000" height="1000">
<tr><td>.</td></tr>
</table>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
スクロールしても常に定位置にメニューを固定する