Javascript使用の固定ナビゲーションの実装

質問

ページをスクロールしても同じ位置に固定されるナビゲーションバーを実装するのに
http://javascript123.seesaa.net/article/101299599.htmlさんのソースを利用しました。
ですが実行ページをIEで見ると分かると思うのですが、IEで表示した場合、表示がブレて
綺麗に実装出来ません。IEでも他のブラウザと同じように表示されるようにソースを改変
して直すことは出来ないでしょうか？また何故IEだとこのソースの動作がおかしくなる
のかも教えて頂きたいです。

回答No.2

tracer · ベストアンサー

ちなみに、サンプルページをChrome(dev.26)で見ると、普通にブレてるんですが。。

一般的なアプローチはおそらくこうです。

・通常のブラウザ用にposition:fixedで実装する。
・position:fixedが効かないブラウザは、jsで実装する。

/*通常のブラウザ*/
#sample{
　position:fixed;
　top:0;
}
/*IE9以下に適応するスタイル*/
body{
　filter:expression('');
}
#sample{
　position:absolute;
　top:expression((documentElement.scrollTop || document.body.scrollTop) + 0 + 'px');
}

IEはcss内にjsを記述できるので、cssファイルの変更だけで対応出来ます。
ポイントは、bodyに適応するfilterです。これがないと同じようにブレます。
css内の0になってる値を変えて、固定位置を調整してください。
CSSは、IEハックを使用してIE9以下だけに適応させてもいいですが、HTML内条件式で、IEだけに読み込ませるcssを作った方がスマートです。ちなみに、IE6でもちゃんと動きます。

<!--[if lt IE 9]>
<link href='ie.css' rel='stylesheet' type='text/css'>
<![endif]-->

お礼

解答ありがとうございます。教えて下さったコードで試してみました。コードが減って記述も綺麗になって嬉しいのですが、やはりブレが起こります。ただスクロールバーでの移動だとブレが起こらずマウスホイールだとブレが起きました。少しややこしいのですが、スクロールバーで移動した後、ページが先頭か一番下にない状態でマウスホイールで先頭か一番下に行かないように移動してもブレが起きませんでした。
質問にあるサイトのサンプルをChromeでもう一度確認してみましたが、質問した時は殆どブレてなかったのに今試したら凄いブレるようになっていました。ちょっと何故か分かないです。

私の環境がおかしいのか、又これ以上はfixed無しでは無理なのかも知れませんが暫く意見を募集するので何か分かった方はお願いします。教えて下ったやり方で試したブラウザはIE９でHTML構造はDIVを作りページがスクロール出来るようにHeightを高く持たせ、その中に固定用のDIVをもう一つ作りsampleのIDを当て上部に固定しました。実行環境はこんな感じです。

補足

HTML構造の文に書きませんでしたがブレないようにするポイントで教えて下さったBodyにfilter:expression('');も当てています。

回答No.3

tracer

いっそのことie9.jsを使ってみては？
ただし、期待する以上の機能があるので、ベストプラクティスかどうかはわかりませんが。

参考URL：

http://internet-explorer9.info/other/564/

お礼

解答ありがとうございます。現在既に実装したいページがIE9の環境にあることと、IE9でも文章型宣言がStrictでないとFixedは使えないので駄目みたいです。

補足

これ以上解答が無いようなので一旦締め切らせて貰います。
回答者さんありがとうございました。

回答No.1

tracer

Web系技術は1年持たないものも多いです。
その中で参考にしたソースは、4年以上の前のものです。
賞味期限が切れています。
Web系技術に限っては、賞味期限がきれた情報は、毒にしかなりません。

さて、今では要素固定はjavascriptを使わずとも簡単に実装できます。
cssで一行書くだけです。

#sapmle{
　position:fixed
}

これだけです。
他にも設定項目はあるので、詳しい情報は「css position fixed」で調べてみてください。
ただし、IE6では動きません。(IE7以上なら動く)
IE6で動かないのは、IE6が古いからです。それ以上の表現方法がありません。

お礼

解答ありがとうございます。質問には書いていませんでしたが事情により環境がIE8又はIE9の文章型宣言Transitional限定なのでposition:fixedが使えないのです。IEでは現在、文書型宣言がStrictの場合のみposition:fixedが使えるようになっています。その為何とかならないか調べていたところJavascriptで補う方法を見つけたのですがこちらもIEで表示がブレる欠点が合ったので質問させて頂きました。

補足

観覧者さんは質問にこのお礼の補足を考慮して解答をお願いします。