- ベストアンサー
ブラウザ上に固定させるメニュー
http://www.430.jp/rak2/user/samp1/ ↑サンプル掲示板ではページ上部にメニューを固定させていますが、これと同じようなものを探しています。これはJavaScriptで実現させるのでしょうか？ 以前にスタイルシートで試したことがあるのですが、低スペックマシンで高速スクロールするとメニューがぶれてしまいました。 サンプルソースを紹介しているサイト、または、書き方をお教え頂けると助かります。どうぞよろしくお願いいたします。
- cocolink
- お礼率91% (83/91)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
CSSの overflow:auto;(またはscroll) でページの一部をスクロールで表示できるようにしていますね。 下は自分で少しアレンジしてみたものです。要JavaScript。 横スクロールが発生するような場合はどうなるか分かりませんが参照ページのようにスクロールしても固定メニューがぶれません。 <html> <head> <style type="text/css"> <!-- body { margin:0px;/*デフォルトではページ周りに微妙な空間があるので0pxに*/ overflow:hidden;/*本来のスクロールバーを非表示*/ } --> </style> </head> <body> <div style="height:25px;"> 固定メニューの内容 </div> <div style="width:100%;height:expression(document.body.clientHeight-25);overflow:auto;"> ページの内容 </div> </body> </html> ソース内に二つある「25」は同じ値になるようにしてください。 一つ目の<div></div>を</body>の直前に移動すると固定メニューが下に固定されます。
その他の回答 (1)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>??</title> <style type="text/css"> <!-- /*body,htmlを閲覧領域と同じサイズにする*/ html,body{ margin:0; width:100%; height:100%; overflow:hidden; } #menu{ width:100%; } #content{ width:100%; overflow:auto; } --> </style> <script type="text/javascript"> <!-- window.onload = resize window.onresize = resize function resize(){ /*閲覧領域の高さ取得 IE(document.compatMode == 'CSS1Compat') ：document.documentElement.clientHeight = 閲覧領域の高さ IE(document.compatMode != 'CSS1Compat') : document.body.clientHeight = 閲覧領域の高さ Firefox1.5,Opera8,9 : window.innerHeight = 閲覧領域の高さ */ var CSS1Compat = (document.compatMode == 'CSS1Compat'); var e = (CSS1Compat) ? document.documentElement : document.body; viewportHidth = (window.innerHeight) ? window.innerHeight : e.clientHeight Menu = document.getElementById('menu') Content = document.getElementById('content') /* #content高さ = 閲覧領域の高さ - #menu高さ*/ Content.style.overflow = "hidden"//計算する時にスクロールバーが邪魔になるので消す。 Content.style.height = viewportHidth - Menu.offsetHeight + "px" Content.style.overflow = "auto"//スクロールバーを出す } /*もしborderをnone以外に設定するなら border = obj.offsetHeight - obj.clientHeight もしpaddingを設定するなら IE : obj.currentStyle.paddingTop !IE : document.defaultView.getComputedStyle(obj, '').getPropertyValue("padding-top") でCSSの値をとれるので #content高さから引きますが、IEでdocument.compatMode != 'CSS1Compat'なら引かなくて良いはずです。 (paddingの値がpx以外を使うならpxに換算する必要があります) borderやpaddingを使う場合は幅の計算もする必要が有ります。 */ //--> </script> </head> <body> <div id="menu">#menu</div> <div id="content">#content</div> </body> </html> これでぶれないと思いますけど・・・
お礼
ご回答ありがとうございました。
お礼
ご回答ありがとうございました。