ページ内のメニューを固定する

メニューボタンをページ左上に貼り付けて、スクロールしても隠れない様に固定します。
背景画像の固定のようですが、ページ内にメニューボタンが浮いて移動する感じです。
この方法で、ページ内リンクボタン(ページ上部へ戻る)もページ右下に貼り付けます。

メニューとバナーの左上固定サンプルページ  

以下のJAVAスクリプトを、htmlの<head>〜</head>の中に丸々コピーして貼り付けます。

<head>
<script language="JavaScript"><!--
function ichikotei()//
{
sx = document.body.scrollLeft;
sy = document.body.scrollTop;
kotei.style.left= sx + 10;
//↑左側からの位置。
kotei.style.top = sy + 10;
//↑上側からの位置。
}
// --></script>
</head>


「左側からの位置」と「上側からの位置」の「10」の数値を変更させ、スクロール後の位置を設定します。
次にhtml内の
<body>タグを探し「<body onScroll="ichikotei()">」と 変更。
これで、JAVAスクリプトの準備完了。


<head>〜</head>の間に、JAVAスクリプトをコピーしたら、次に位置固定させたい部分のタグを改造します。

<a href="index.htm"><font size="4">トップページに戻る</font></a>

上のようなリンクされた文字を固定する場合は。


<a href="index.htm" id="kotei" style="position:absolute; top:10px;left:10px;">
<font size="4">トップページに戻る</font></a>


上のようにHTMLを変更します。「top:10px;left:10px」この「10」の数値は、
スクロール前の位置になるので、前項で設定した、「スクロール後の位置」に合わせます。
「id="kotei"」部分は、スタイルシートなどを利用している場合、
「id」名が重ならないよう注意が必要。これで文字位置が固定されます。


バナーなどの画像の位置を固定するのも、同じ要領になります。
<img src="banner.gif">
上のような画像の位置を固定する場合は

<img src="banner.gif" id="kotei" style="position:absolute;top:10px;left:10px;">
このように変更します。これで、バナー画像が画面左上に固定されます。

メニューとバナーの左上固定サンプルページ