スクロールしても常に定位置にメニューを固定する

動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows × - × ×
Macintosh × × - - × ×
UNIX - - - - - × ×

解  説  スクロールしても常に定位置にメニューを固定するにはスクロールしたら表示座標を計算しなおして再度座標を設定します。スクロールしたかどうかはonscrollイベントで検知できます。どの程度スクロールしたか(スクロール量)は横方向はdocument.body.scrollLeft、縦方向はdocument.body.scrollTopに格納されているので、この値と表示座標を加算します。
コード <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!