- ベストアンサー
スクロールしても画像・文字がついてくるJavascriptのコード
- スクロールしても画像や文字がついてくるJavascriptのコードについて質問します。
- DOCTYPEを変更すると動作しなくなった原因について教えてください。
- 使用ブラウザはIE6です。
- sadoru
- お礼率80% (58/72)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<script type="text/javascript"> window.onscroll = function(){ document.getElementById('obj1').style.top = (document.body.scrollTop ||document.documentElement.scrollTop) + 200 + 'px'; } </script> で、位置に固定させる事ができます。数字200の部分をobj1のtopと同じにする事で変更可能です。
その他の回答 (1)
- arexis
- ベストアンサー率66% (66/99)
DOCTYPEで動かなくなるのはScrollTopのとり方の問題です。 document.body.scrollTop document.documentElement.scrollTop の2つを用意して、どちらか取れるほうにしておけばよいので、書き換えようと思いましたが、 そのスクリプトではFirefoxでは動かないので BODYタグの onloadとそのスクリプトを削除して <script type="text/javascript"> window.onscroll = function(){ document.getElementById('obj1').style.top = (document.body.scrollTop ||document.documentElement.scrollTop) +'px'; } </script> でDOCTYPEやブラウザに関係なく動くと思いますが、どうでしょう？
補足
ありがとうございます。 勉強になりました。 もう一つ教えていただけますでしょうか？ 下記の通り、style='position:absolute;top:200px; right:100px; ' を追加し画面の中ほどに画像をおいて、そこから画像をスクロールさせようと思うのですが、スクロールをすると、画像が上部に移動してしまいます。 中央部に固定された状態で下部へ画像がスクロールすることはできますでしょうか？ よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <div id='obj1' style='position:absolute;top:200px; right:100px; '> <img src="a.gif"> </div> <script type="text/javascript"> for(var i=0;i<100;i++){document.write('<br>')} </script> </body> </html> <script type="text/javascript"> window.onscroll = function(){ document.getElementById('obj1').style.top = (document.body.scrollTop ||document.documentElement.scrollTop) +'px'; } </script>
お礼
ありがとう御座います。 解決致しました。 大変勉強になりました。