|
メニューボタンをページ左上に貼り付けて、スクロールしても隠れない様に固定します。
背景画像の固定のようですが、ページ内にメニューボタンが浮いて移動する感じです。
この方法で、ページ内リンクボタン(ページ上部へ戻る)もページ右下に貼り付けます。
| 以下の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;"> このように変更します。これで、バナー画像が画面左上に固定されます。 |