スクロールしても文字を固定位置に表示させるには？

解決済

質問者：konchan_konchan
質問日時：2005/04/26 13:57
回答数：3件

スタイルシートについての質問です。

スクロールしても画像が動かないようにすることができるので、
同じように文字も固定表示したいと思っています。
position:fixed;
を使おうと思ったらIEではサポートされていないようなので使えません。

何か他の方法で文字の固定表示はできないでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1

回答者： quads
回答日時：2005/04/26 18:22

どのような記述を試したのでしょうか？

この回答への補足

<html>
<head>
<style type="text/css">

</style>
<title>test</title>
</head>
<body>

固定したい文字
</body>
</html>

例えば、上記のように上から50px、左から200pxの位置に「固定した文字」という文字を表示させたい場合、
position:fixed;　を使っても指定位置に表示されません。
position:absolute;　を使うと指定位置に表示されますが、スクロールした場合に位置が変わってしまいます。
スクロールしても定位置に文字を表示させたいと思っています。

補足日時：2005/04/26 21:22

通報する

- 0
- 件

通報する

No.2

回答者： BLUEPIXY
回答日時：2005/04/26 19:27

ＩＥでのサンプルを作ってみました。

他の方法もあるかもしれません。
サンプルを実行すると、スクロールしても画面上部に位置するようになります。位置をずらすには、＋ｎｎすればいいです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>Welcome</title>
<script type="text/javascript">

</script>
</head>
<body onscroll="displayString()" style="z-index:0">
<div ID="NoMove" style="position:absolute;z-index:2;left=150px;background-color:FFF">
動きません
</div>
<div>
ダミーの文字
1 
2 
3 
4 
5 
6 
7 
8 
9 
0 
 -
1 
2 
3 
4 
 56
 8
 a
s 
fd 
h 
gd 
g 
dg 
 fdg
g 
1 
2 
3 
4 
5 
6 
7 
8 
9 
0 
 -
1 
2 
3 
4 
 56
 8
 a
s 
fd 
h 
gd 
g 
dg 
 fdg
g 
1 
2 
3 
4 
5 
6 
7 
8 
9 
0 
 -
1 
2 
3 
4 
 56
 8
 a
s 
fd 
h 
gd 
g 
dg 
 fdg
g 
1 
2 
3 
4 
5 
6 
7 
8 
9 
0 
 -
1 
2 
3 
4 
 56
 8
 a
s 
fd 
h 
gd 
g 
dg 
 fdg
g 
</div>
</body>
</html>

この回答への補足

サンプルまで作っていただき、ありがとうございました。
サンプルではスクロールした場合、文字がブレてしまいますが、ブレずに表示はできますでしょうか？

補足日時：2005/04/26 21:14

通報する

- 0
- 件

通報する

No.3ベストアンサー

回答者： BLUEPIXY
回答日時：2005/04/27 00:35

>ブレずに表示はできますでしょうか？

必死に追随しているって感じですよね～＾＾；
最近、どっかで、うまくメニューを同じ位置に表示しているのを見たんですけど、どうやってるかは調べなかったんで、今回のは、一応オリジナルなんですけど、スムーズにスクロールさせるのは、ちょっと思いつかないですね～。
onscrollで、すぐに、表示させようとしないで、ちょっと間をおいてから表示する方がいいかもしれません。今のところいい方法が浮かばないです。すみませんです。
画像が固定できるんだったら、文字を画像にしてしまうというのも１つの方法ですけどね～。

ところで、
＃２で
("NoMove").scrollIntoView(true);
は、テスト中のゴミですので、不要です。
すみませんです。
m(_ _)m