フレーム非対応のブラウザについて
笠原 励（氷炎 雷光風）
javascriptの部分のみなので、
クロス＆Followup-To:fj.comp.lang.javascriptです。
久野さんの書かれたサンプルはシグネチャ以後に残してます。
Message-ID: <c30ggm$2l...@utogw.gssm.otsuka.tsukuba.ac.jp>
において久野さんは書きました。
> var l = document.getElementById('left'); l.style.position = 'absolute';
> var b = document.documentElement || document.body;
> setInterval(function() { l.style.top = b.scrollTop + 'px'; }, 200);
の部分。
・ 変数lの行は、leftというidの部分のpositionの値をabsoluteに変更する
・ setIntervalの行は200ミリ秒ごとに、leftのトップ部分とbのトップ部分を
同期させる
＃どっちも、解釈はあってますか？
ということだと思いますが、
document.documentElementとdocument.bodyの論理和は何故でしょう？
ドキュメント（今回の場合、htmlファイル）には、
<head></head>と<body></body>があるので、
<body></body>の個所にのみ、適用させるための論理和ということでしょうか？
あと、ウチだけかもしれませんが、
久野さんのサンプルをＩＥ５（ｗｉｎ９８ＳＥ、バージョン５．０）で開くと、
「不正な処理をしたので、データを保存してＰＣを再起動してください」
というメッセージを吐かれてしまいました。
＃ＩＥ６では不明です。久野さんは、ＩＥ６で確認されたんですかね？
ではでは。
--
笠原 励（氷炎 雷光風／ひえん らいこふ）
cun...@uranus.interq.or.jp －受信専用－cun...@yahoo.co.jp
オリジナルストーリーの感想は、if_t...@infoseek.jpまで。
Subjectに「番外編」とあれば、ほぼオリジナルストーリーです。
> ---
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
> <html><head><title>???</title>
> <style type="text/css">
> #left { position: fixed; left: 0px; width:18%; border: blue double 2px }
> #right { margin-left: 20%; border: green double 2px }
> </style>
> <script type="text/javascript">
> function init() {
> if(document.all) { // IE
> var l = document.getElementById('left'); l.style.position = 'absolute';
> var b = document.documentElement || document.body;
> setInterval(function() { l.style.top = b.scrollTop + 'px'; }, 200);
> }
> }
> </script>
> </head>
> <body onload="init()">
> <div id="left">
> <p>a</p><p>b</p><p>c</p><p>d</p><p>e</p><p>f</p><p>g</p>
> </div>
> <div id="right">
> <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
> <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
> <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
> <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
> <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
> <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
> <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
> <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
> <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
> <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
> <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
> </div>
> </body>
> </html>
ku...@gssm.otsuka.tsukuba.ac.jp
cun...@uranus.interq.or.jpさん:
> ・ 変数lの行は、leftというidの部分のpositionの値をabsoluteに変更する
そうです。IEだとfixedがダメなので。
> ・ setIntervalの行は200ミリ秒ごとに、leftのトップ部分とbのトップ部分を
> 同期させる
そうです。
> document.documentElementとdocument.bodyの論理和は何故でしょう？
論理和ではないのでして。IEの場合、標準準拠モードではルートノー
ドはdocument.documentElementですが、互換モードではルートノードは
document.bodyです。他にもそういうブラウザあったっけな。で、どっ
ちでも動くようにするには、document.documentElementがあればそれ、
なければdocument.bodyを使えばいいわけです。
var b = document.documentElement ? document.documentElement : document.body;
でもそりゃ長いし同じことだから
var b = document.documentElement || document.body;
と書くようにしてます。
> 久野さんのサンプルをＩＥ５（ｗｉｎ９８ＳＥ、バージョン５．０）で開くと、
> 「不正な処理をしたので、データを保存してＰＣを再起動してください」
> というメッセージを吐かれてしまいました。
げげー。IE5はダメかも。IE5.5からだいぶましなんですが。でもこの程
度で死ぬかねえ。
> ＃ＩＥ６では不明です。久野さんは、ＩＥ６で確認されたんですかね？
Win IE6とUnix Mozillaです。 久野
笠原 励（氷炎 雷光風）
Message-ID: <c34gcf$23...@utogw.gssm.otsuka.tsukuba.ac.jp>
において久野さんは書きました。
> > document.documentElementとdocument.bodyの論理和は何故でしょう？
>
> 論理和ではないのでして。IEの場合、標準準拠モードではルートノー
> ドはdocument.documentElementですが、互換モードではルートノードは
> document.bodyです。他にもそういうブラウザあったっけな。
ルートノードって、ドキュメント内の「最上位の親要素」
ということでしょうか？
> で、どっちでも動くようにするには、document.documentElementがあればそれ、
> なければdocument.bodyを使えばいいわけです。
そういうことですか。了解です。
ところで、論理和という解釈をしたのは、「||」が論理演算子
であると書いてる書籍が手元にあるからです。
＃翔泳社刊 ホームページ辞典第３版 Ｐ３６６～３６７
> var b = document.documentElement ? document.documentElement : document.body;
ルートノードを探して見つかったものを
「最上位の親要素」に設定するということですね？
で、このままだと長ったらしいので、省略記法？で、
var b = document.documentElement || document.body;
というふうに表記するということですね？
> げげー。IE5はダメかも。IE5.5からだいぶましなんですが。でもこの程
> 度で死ぬかねえ。
う～ん、どうなんでしょう？
（ウチで）ＩＥ５で試した時の動作としては、
サンプルを表示するが、一定時間（長くても数秒程度）すると、
「強制終了します。云々」のダイアログが出る。
次に「不正な処理をしたので云々～データを保存してＰＣ再起動してください」
のダイアログが出る。
と言う感じですね。
> setInterval(function() { l.style.top = b.scrollTop + 'px'; }, 200);
を何度か実行すると、「不正な処理」が起きてしまうように感じました。
> > ＃ＩＥ６では不明です。久野さんは、ＩＥ６で確認されたんですかね？
>
> Win IE6とUnix Mozillaです。 久野
久野さんのフォローを見て、ＩＥ６ＳＰ１にすると、正常に動作しました。
なお、今回の大幅変更については、フレームは使わず、
・ CSS
・ CSS+javascript
のどっちかでいくことにします。
CSS単独での変則的なレイアウト（例えば、左上、左下、右）
といったような場合の書き方はわかったんですけど・・・
久野さんから示していただいたCSS+javascriptの場合、
左上、左下、右の様にするとしたら、
１ CSSだけいじればよい
２ javascriptだけいじればよい
３ 両方ともいじる必要がある
どれでしょうか？
ku...@gssm.otsuka.tsukuba.ac.jp
cun...@uranus.interq.or.jpさん:
> ルートノードって、ドキュメント内の「最上位の親要素」ということ
> でしょうか？
そうそう。
> ところで、論理和という解釈をしたのは、「||」が論理演算子である
> と書いてる書籍が手元にあるからです。
まあそれはそうなんですが、実は「x || y」というのは「if x then
x else y fi」という制御構造でもあるわけです。
> var b = document.documentElement || document.body;
> というふうに表記するということですね？
そうですというか、上のif文を短く書いただけ。
> なお、今回の大幅変更については、フレームは使わず、
> ・ CSS
> ・ CSS+javascript
> のどっちかでいくことにします。
説得されましたね ^_^;
> CSS単独での変則的なレイアウト（例えば、左上、左下、右）
> といったような場合の書き方はわかったんですけど・・・
> 久野さんから示していただいたCSS+javascriptの場合、
> 左上、左下、右の様にするとしたら、
> １ CSSだけいじればよい
> ２ javascriptだけいじればよい
> ３ 両方ともいじる必要がある
うーん、質問の意味がよく分かりませんが。JavaScriptはIEで左側の
divを移動(というか画面上で固定)するためにだけ使っているので…左
上だけ固定ならそのまま、左下も固定なら手直し、じゃないでしょうか。
そういう意味でよかったのかな? 久野
笠原 励（氷炎 雷光風）
Message-ID: <c365h7$c...@utogw.gssm.otsuka.tsukuba.ac.jp>
において久野さんは書きました。
> > ところで、論理和という解釈をしたのは、「||」が論理演算子である
> > と書いてる書籍が手元にあるからです。
>
> まあそれはそうなんですが、実は「x || y」というのは「if x then
> x else y fi」という制御構造でもあるわけです。
ここが理解できていなかったので、ヘンな質問をしたことに
なったわけですね。
ようやく、つっかえが取れた感じです。
> > なお、今回の大幅変更については、フレームは使わず、
> > ・ CSS
> > ・ CSS+javascript
> > のどっちかでいくことにします。
>
> 説得されましたね ^_^;
はい。説得されました。（笑）
> > CSS単独での変則的なレイアウト（例えば、左上、左下、右）
> > といったような場合の書き方はわかったんですけど・・・
> > 久野さんから示していただいたCSS+javascriptの場合、
> > 左上、左下、右の様にするとしたら、
> > １ CSSだけいじればよい
> > ２ javascriptだけいじればよい
> > ３ 両方ともいじる必要がある
>
> うーん、質問の意味がよく分かりませんが。JavaScriptはIEで左側の
> divを移動(というか画面上で固定)するためにだけ使っているので…左
> 上だけ固定ならそのまま、左下も固定なら手直し、じゃないでしょうか。
>
> そういう意味でよかったのかな?
はい。そういうことです。で、質問しておいてナンですが・・・
自己解決しました。
別記事で、htmlファイルとCSSファイル、今回の件の動作確認にあたり、
わかったことをまとめて出しておきます。
T. Sugita
In message news:20040316111914.2...@uranus.interq.or.jp
"笠原 励（氷炎 雷光風）" <cun...@uranus.interq.or.jp> wrote ...
> で、このままだと長ったらしいので、省略記法？で、
> var b = document.documentElement || document.body;
> というふうに表記するということですね？
if 文の中と同じで、評価と考えると多少わかりやすいかも。
たまに見かけるのは、以下のような使い方です。
function func(arg1) {
arg1 = arg1 || "";
...
}
> （ウチで）ＩＥ５で試した時の動作としては、
というか、IE5.5sp2 でも動作しません。(強制終了はしませんが…)
document.body を利用すると動作します。
documentElement の方は時間があったら調べてみます…が、
いつになるか…(^^;;
> 久野さんのフォローを見て、ＩＥ６ＳＰ１にすると、正常に動作しました。
IE系だと、IE4.x 以降なら同じような感じで動作するものは
作れるんじゃないかと思います。
あと、以前、凝った作りになってるなと思ったのが以下のページです。
> なお、今回の大幅変更については、フレームは使わず、
> ・ CSS
> ・ CSS+javascript
> のどっちかでいくことにします。
個人的には、fixed とフレームだと、フレームの方が
対応しているのは多そうな気が・・・
それに、どうしてもガタガタしますよね。
応答速を考えるなら、onscroll の方が良いと思いますが、
それでもかなり気になります。
動かしている間、非表示にするという手はあるかもしれません。
あと、noframes での対応として、他ページ(インデックスに)
飛ばす場合、JavaScript か meta refresh かかな。
meta は用法は正しいのか？というのが不明です。
フレームでのブックマーク対策としては、MSDN やヘルプ等でも
一部実装されている「同期」(cgi と同じで ? でページを指定)
という手はあります。
iframe も手かもですが、どのブラウザが対応してたかな…
> 久野さんから示していただいたCSS+javascriptの場合、
> 左上、左下、右の様にするとしたら、
>
> １ CSSだけいじればよい
> ２ javascriptだけいじればよい
> ３ 両方ともいじる必要がある
>
> どれでしょうか？
ウィンドウサイズが変化した場合にも対応するんですよね？
それだと、1 か 3 だと思います。
CSS のみだと expression 使えば良いのかもですが、
試してないもので…(^^;
M.Wada
> var b = document.documentElement ? document.documentElement : document.body;
> でもそりゃ長いし同じことだから
> var b = document.documentElement || document.body;
> と書くようにしてます。
私も同じ疑問を抱いたので、調べてみました。
Netscape DevEdgeのJavaScipt Central
( http://devedge.netscape.com/central/javascript/ )
にある、JavaScript 1.3 Client-Side Reference のLogical Operators
のセクションには、
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/ops.html#1044813
> ||
> expr1 || expr2
> (Logical OR) Returns expr1 if it can be converted to true;
> otherwise, returns expr2. Thus, when used with Boolean values,
> || returns true if either operand is true; if both are false,
> returns false.
と書いてありました。(&& も同様。JavaScript 1.4,1.5も同じ)
ただし、「Backward Compatibility」として、
> JavaScript 1.0 and 1.1.
> The && and || operators behave as follows:
> ||
> If the first operand (expr1) can be converted to true,
> the || operator returns true rather than the value of expr1.
記述がありました。
1.2以前のReferenceは無かったので正確なところは不明ですが、
おそらく、JavaScript 1.2で仕様が変更されたのでしょう。
Logical Operaterは必ずBooleanを返す系統の言語育ちで、
JavaScriptはNetscape2.2の頃のJavaScript 1.1ベースの知識だったので
ちょっと驚きました。
でも、便利ですね。
和田
笠原 励（氷炎 雷光風）
Message-ID: <c375pp$o1h$1...@news00.iij4u.or.jp>
において、すぎたさんは書きました。
> > で、このままだと長ったらしいので、省略記法？で、
> > var b = document.documentElement || document.body;
> > というふうに表記するということですね？
>
> if 文の中と同じで、評価と考えると多少わかりやすいかも。
> たまに見かけるのは、以下のような使い方です。
>
> function func(arg1) {
> arg1 = arg1 || "";
> ...
> }
例えば、文字型の変数を使って何かするような場合に、
見られるような文でしょうか？
> > （ウチで）ＩＥ５で試した時の動作としては、
>
> というか、IE5.5sp2 でも動作しません。(強制終了はしませんが…)
> document.body を利用すると動作します。
> documentElement の方は時間があったら調べてみます…が、
> いつになるか…(^^;;
この辺の話については、
Message-ID: <c34gcf$23...@utogw.gssm.otsuka.tsukuba.ac.jp>
で久野さんが書かれていることを参照していただくのが良いかと。
> > なお、今回の大幅変更については、フレームは使わず、
> > ・ CSS
> > ・ CSS+javascript
> > のどっちかでいくことにします。
>
> 個人的には、fixed とフレームだと、フレームの方が
> 対応しているのは多そうな気が・・・
> それに、どうしてもガタガタしますよね。
> 応答速を考えるなら、onscroll の方が良いと思いますが、
> それでもかなり気になります。
> 動かしている間、非表示にするという手はあるかもしれません。
> あと、noframes での対応として、他ページ(インデックスに)
> 飛ばす場合、JavaScript か meta refresh かかな。
> meta は用法は正しいのか？というのが不明です。
もっと手抜きで、<a>タグで、
<noframes>
<a href="hogehoge.html">フレーム非対応な方はクリックしてください</a>
</noframes>
と書くつもりでした。
<meta>タグはヘッダ部分に書くもののはずですし、
使い方としては、違う気がします。
> フレームでのブックマーク対策としては、MSDN やヘルプ等でも
> 一部実装されている「同期」(cgi と同じで ? でページを指定)
> という手はあります。
>
> iframe も手かもですが、どのブラウザが対応してたかな…
おおっ！iframeなんてあったんでしたっけ。
全然思いもよりませんでした。
ＣＧＩによる混在させたい場合には使えそうですかね？
なお、この話に関しては、サブジェクトを変えて、スレッドを
派生させます。
> > 久野さんから示していただいたCSS+javascriptの場合、
> > 左上、左下、右の様にするとしたら、
> >
> > １ CSSだけいじればよい
> > ２ javascriptだけいじればよい
> > ３ 両方ともいじる必要がある
> >
> > どれでしょうか？
>
> ウィンドウサイズが変化した場合にも対応するんですよね？
> それだと、1 か 3 だと思います。
自己流で解決はしましたが、
「ウィンドウサイズが変化した場合」「表示に関する応答速度」
は考慮していませんでした。
「メニュー部分を固定表示したい」というのが、
当初からの目的であり、その為に「フレームを使おうか？」と考えたわけですが、
・ CSS単独
・ CSS＋javascript
のどちらかで、目的を達せられそうだということがわかりました。
＞久野さん
サンプルありがとうございました。
> CSS のみだと expression 使えば良いのかもですが、
> 試してないもので…(^^;
expressionって何でしょうか？拡張？
OOTANI TAKASHI
>> var b = document.documentElement ? document.documentElement : document.body;
>> でもそりゃ長いし同じことだから
>> var b = document.documentElement || document.body;
>> と書くようにしてます。
> Logical Operaterは必ずBooleanを返す系統の言語育ちで、
> JavaScriptはNetscape2.2の頃のJavaScript 1.1ベースの知識だったので
> ちょっと驚きました。
> でも、便利ですね。
C 等から入ると、そうでしょうね。私はCより先にLISPを知ったので
(当時日本語のCの本が無かった)、C の && || が 0 か 1 しか返さないのは
違和感があり不便に思いました。まあ、変数に型のある言語なので両辺の型が
違う場合とかを考えるとしょうがないのかもしれません。
新しい言語はあまり知らないのですが、Boolean 以外の値に && || が使える言語で
結果に Boolean しか返さない言語って C類 の他にメジャーな範囲では何があります？
(Cの場合Booleanじゃないという突っ込みはしないでください)
かなり前になりますが、fj のどこかで、
(1) && || 演算子は、左辺の値によって右辺が評価されたりされなかったり
するのが演算子の意味として本質的である
(2) && || 演算子は、論理演算処理が本質的であり、右辺が評価されたり
されなかったりは、最適化/高速化のために過ぎない
という議論をした覚えがあります。
私は(1)の立場。
andthen orelse というふうに(1)であることがよくわかる演算子の言語もありましたね。
ADAだっけ?
Followup-To: fj.comp.lang.misc にしました。
--
tksotn
Eiji KATSURA
cun...@uranus.interq.or.jpさんは書きました。
> なお、今回の大幅変更については、フレームは使わず、
>
> ・ CSS
> ・ CSS+javascript
>
> のどっちかでいくことにします。
「フレーム非対応のブラウザ」という題名で最初に記事を
書かれたときは、アクセシビリティのことを配慮された
発言かと思っていましたが、単にメニューを固定したいという
ことだったのでしょうか？
JavaScript(というかスクリプト一般)を Off にしている
ユーザーもそれなりにいることを考えないと、「公式ページ」
としてはあまりよくないのでは？
桂 英治＠(株)横浜インテリジェンス ( kat...@hamaint.co.jp )
ku...@gssm.otsuka.tsukuba.ac.jp
blackholeさん:
> JavaScript(というかスクリプト一般)を Off にしている
> ユーザーもそれなりにいることを考えないと、「公式ページ」
> としてはあまりよくないのでは？
いやまあ、その場合はメニューがページ先頭にあってスクロール
すると普通に視界から消えるわけで、それが悪いっていうほどでも
ないのではないでしょうか。
「ナビゲーションできない」じゃ困るけど 久野
笠原 励（氷炎 雷光風）
> <20040316111914.2...@uranus.interq.or.jp>の記事において
> cun...@uranus.interq.or.jpさんは書きました。
>
> > なお、今回の大幅変更については、フレームは使わず、
> >
> > ・ CSS
> > ・ CSS+javascript
> >
> > のどっちかでいくことにします。
>
> 「フレーム非対応のブラウザ」という題名で最初に記事を
> 書かれたときは、アクセシビリティのことを配慮された
> 発言かと思っていましたが、単にメニューを固定したいという
> ことだったのでしょうか？
もともとのやりたいことは、「メニューを固定したい（常に表示したい）」
これです。
ただ、フレームを使おうか？ということに対しての
思考・行動経緯は下記の通りです。
メニューを固定したい（常に表示したい）。
↓
それにはフレームを使うのが最適かな？
フレームなら、対象のフレーム以外は無影響だし。
↓
でも、ブラウザが非対応のものもあるだろうし、どんなブラウザが
非対応なんだろう？
↓
googleで検索してみるも、ヒット数が多すぎて、よくわからず。
↓
fj.net.www.browsersに投稿
その後、多くのフォローをいただき、CSS（+javascript）で、
「フレームを使わずともいけそうだ」ということがわかり、
フレームを使わないことにしました。
> JavaScript(というかスクリプト一般)を Off にしている
> ユーザーもそれなりにいることを考えないと、「公式ページ」
> としてはあまりよくないのでは？
もちろん、CSS・javascriptをオフの設定にしている方もいらっしゃる
わけですよね。
なので、そういう方でも、htmlそのもので内容を掴めるようにはしたいとは
思います。
ところで・・・今回は「私個人のサイト」をいじくるのですが、
何を以って「公式ページ」と判断されたのでしょうか？
単なる勘違いなら、それで構わないんですけれど・・・
Eiji KATSURA
cun...@uranus.interq.or.jpさんは書きました。
> ところで・・・今回は「私個人のサイト」をいじくるのですが、
> 何を以って「公式ページ」と判断されたのでしょうか？
> 単なる勘違いなら、それで構わないんですけれど・・・
単なる勘違いです。
(www.fj-news.orgの話と時期が重なっていたので混同していました。)
T. Sugita
In message news:20040317003513.9...@uranus.interq.or.jp
"笠原 励（氷炎 雷光風）" <cun...@uranus.interq.or.jp> wrote ...
> 例えば、文字型の変数を使って何かするような場合に、
> 見られるような文でしょうか？
そうですね。
引数が省略されたときに、undefined じゃなくて
オブジェクトにしたい場合とかです。
デフォルト値だと、きちんと undefined で判定した方が
良いと思います。
> > documentElement の方は時間があったら調べてみます…が、
> > いつになるか…(^^;;
> この辺の話については、
> Message-ID: <c34gcf$23...@utogw.gssm.otsuka.tsukuba.ac.jp>
> で久野さんが書かれていることを参照していただくのが良いかと。
IE5.5sp2 だと、標準モードというのは無くて、IE6 の互換モード
に相当します。
その際、先の評価だと document.documentElement になってしまって、
正しく動作しないので、どうするのがスマートだろうか？
という話です。
> <meta>タグはヘッダ部分に書くもののはずですし、
いえ、http ヘッダの話なので、ヘッダ部分に書くのが正しいのかが
判断がつかなかったのです。
> 「ウィンドウサイズが変化した場合」「表示に関する応答速度」
以下、久野さんのを IE5.5sp2 用に加工したサンプルです。
# 非標準モードで書いてます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>???</title>
<style type="text/css">
BODY, DIV, P {
margin : 0px;
padding: 0px;
font-family: monospace;
}
#left {
position: absolute; border: blue double 2px;
left : 0px;
top : 0px;
width : 100px;
height: 200px;
}
#left2 {
position: absolute; border: blue double 2px;
left : 0px;
top : 200px;
width : 100px;
height: 200px;
}
#right { margin-left: 100px; border: green double 2px }
</style>
<script type="text/javascript">
var scrflag = false;
var tid = null;
var l, l2;
function refresh() {
l .style.top = document.body.scrollTop + 0+'px';
l2.style.top = document.body.scrollTop +200+'px';
if(document.all) { // IE
l2.style.height = document.body.clientHeight-200+'px';
} else { // 非標準モード
l2.style.height = window.innerHeight-204+'px';
}
}
function setpos() {
refresh();
l .style.visibility = "visible";
l2.style.visibility = "visible";
scrflag = false;
}
function check() {
if (!scrflag) {
l .style.visibility = "hidden";
l2.style.visibility = "hidden";
scrflag = true;
} else {
clearTimeout(tid);
}
tid = setTimeout(setpos, 500);
}
function init() {
l = document.getElementById("left" );
l2 = document.getElementById("left2");
if(document.all) { // IE
window.onscroll = check;
window.onresize = refresh;
} else {
l .style.position = "fixed";
l2.style.position = "fixed";
}
refresh();
}
</script>
</head>
<body onload="init()">
<div id="left">
<p>a</p><p>b</p><p>c</p><p>d</p><p>e</p><p>f</p><p>g</p>
</div>
<div id="left2">
<p>a</p><p>b</p><p>c</p><p>d</p><p>e</p><p>f</p><p>g</p>
</div>
<div id="right">
<p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
<p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
<p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
<p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
<p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
<p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
<p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
<p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
<p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
<p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
<p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
</div>
</body>
</html>
> > CSS のみだと expression 使えば良いのかもですが、
> > 試してないもので…(^^;
> expressionって何でしょうか？拡張？
すみません。expression 使っても、更新にスクリプトが必要
でした。また、IE 以外でサポートしていないかもしれません。
使い方としては、以下のような感じです。
<style>
#left {
position: absolute; border: blue double 2px;
left : 0px;
top : expression(document.body.scrollTop + 0+'px');
width : 100px;
height: 200px;
}
#left2 {
position: absolute; border: blue double 2px;
left : 0px;
top : expression(document.body.scrollTop +200+'px');
width : 100px;
height: expression(document.body.clientHeight-200+'px');
}
</style>
<script>
function refresh() {
document.recalc(true);
}
</script>