![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
ページをスクロールしても同じ位置に固定されるナビゲーションバーを実装するのに
http://javascript123.seesaa.net/article/10129959 …さんのソースを利用しました。
ですが実行ページをIEで見ると分かると思うのですが、IEで表示した場合、表示がブレて
綺麗に実装出来ません。IEでも他のブラウザと同じように表示されるようにソースを改変
して直すことは出来ないでしょうか?また何故IEだとこのソースの動作がおかしくなる
のかも教えて頂きたいです。
No.2ベストアンサー
- 回答日時:
ちなみに、サンプルページを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]-->
この回答への補足
HTML構造の文に書きませんでしたがブレないようにするポイントで教えて下さったBodyにfilter:expression('');も当てています。
補足日時:2013/01/17 18:20解答ありがとうございます。教えて下さったコードで試してみました。コードが減って記述も綺麗になって嬉しいのですが、やはりブレが起こります。ただスクロールバーでの移動だとブレが起こらずマウスホイールだとブレが起きました。少しややこしいのですが、スクロールバーで移動した後、ページが先頭か一番下にない状態でマウスホイールで先頭か一番下に行かないように移動してもブレが起きませんでした。
質問にあるサイトのサンプルをChromeでもう一度確認してみましたが、質問した時は殆どブレてなかったのに今試したら凄いブレるようになっていました。ちょっと何故か分かないです。
私の環境がおかしいのか、又これ以上はfixed無しでは無理なのかも知れませんが暫く意見を募集するので何か分かった方はお願いします。教えて下ったやり方で試したブラウザはIE9でHTML構造はDIVを作りページがスクロール出来るようにHeightを高く持たせ、その中に固定用のDIVをもう一つ作りsampleのIDを当て上部に固定しました。実行環境はこんな感じです。
No.3
- 回答日時:
いっそのことie9.jsを使ってみては?
ただし、期待する以上の機能があるので、ベストプラクティスかどうかはわかりませんが。
参考URL:http://internet-explorer9.info/other/564/
解答ありがとうございます。現在既に実装したいページがIE9の環境にあることと、IE9でも文章型宣言がStrictでないとFixedは使えないので駄目みたいです。
No.1
- 回答日時:
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で表示がブレる欠点が合ったので質問させて頂きました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 10 パソコン初期化の件です 2 2022/06/05 11:05
- Excel(エクセル) 【エクセルマクロ】既に開いているIEの、サイズや表示位置を変更するには 4 2022/12/01 22:57
- その他(ブラウザ) IE・edgeで日増しに観られるサイトが減ってくる。 1 2022/10/04 22:40
- InternetExplorer(IE) Microsoft edgeのIEモードを解除したいのですが。 3 2023/04/09 13:51
- その他(パソコン・周辺機器) EXCELで「WEBオプションの対象ブラウザ」を変更する方法 2 2023/04/12 15:44
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- Chrome(クローム) グーグルクロムをマイクロソフト・エッジに切り替える方法 2 2022/06/20 10:08
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- その他(ブラウザ) Edge internet explorer モードのサイトの再読み込みを許可 表示されない 2 2023/03/03 12:10
- その他(パソコン・周辺機器) RBG信号の2分岐についての質問です 3 2022/06/23 19:42
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Javascript使用の固定ナビゲー...
-
星型評価スターレーティングの...
-
if(1){...}とはどういうことで...
-
禁止文字チェック
-
「終了していない文字列型の定...
-
六曜カレンダー
-
VC#でテキストボックスに変数の...
-
OnTime を使って、分間隔で実行...
-
ホームページビルダーを使って...
-
htmlのfileタグに自動で値を入...
-
resizeToメソッドが動作しません
-
HTML5でFlash並みのゲームが作...
-
覚えるべき言語は何ですか?
-
〔Excel:VBA〕マクロの実行が異...
-
フォルダを自動で開く
-
VB2008で数字の桁数を調べる...
-
VBAによる第3、4水準文字の判定...
-
C#でボタン名を変更しても動く
-
JSPの処理の途中で、JavaScript...
-
JavaScriptでショートカットキ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで ブラウザの閉じる...
-
ASP(VBS) ←→ JavaScript の変数...
-
javascriptで「オブジェクトを...
-
slideToggleの動きがおかしい
-
JavaScriptでIEのウィンドウを...
-
ブラウザ自体の事じゃなくてJav...
-
JavaScriptのVersionは、ブラウ...
-
F5の更新を無効にしたい
-
ウインドウがアクティブか調べ...
-
iPhone用とPC用のホームページ ...
-
iframeで開かれた時だけredirect
-
あるurlが存在する(?)かどう...
-
初めて投稿させていただきます。
-
JSを使ったカレンダーの不具合...
-
カーソルの上に十字架
-
JavaScriptを使えない環境につ...
-
DVD Studio Proでのスクリプト
-
HP内での操作について
-
JAVAスクリプト(マウスストー...
-
javascript(JQuary)について質...
おすすめ情報