http://www.430.jp/rak2/user/samp1/
↑サンプル掲示板ではページ上部にメニューを固定させていますが、これと同じようなものを探しています。これはJavaScriptで実現させるのでしょうか?
以前にスタイルシートで試したことがあるのですが、低スペックマシンで高速スクロールするとメニューがぶれてしまいました。
サンプルソースを紹介しているサイト、または、書き方をお教え頂けると助かります。どうぞよろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
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>の直前に移動すると固定メニューが下に固定されます。
No.2
- 回答日時:
<!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>
これでぶれないと思いますけど・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ダイエット・食事制限 ローファットダイエットについてアドバイスをください。 現在、体脂肪率が28で肥満1型になった旦那のダ 1 2022/09/03 09:06
- WordPress(ワードプレス) ワードプレスで記事を書くスペースの横幅を広げたいです。 1 2022/09/24 18:16
- Chrome(クローム) Chromeが強制終了 1 2023/01/29 09:54
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- WordPress(ワードプレス) wordpressでphpを読み込みたい 1 2022/10/30 23:40
- gooブログ ブログの記事を書きだしのみに表示したい 1 2022/06/25 19:11
- 建設業・製造業 仕出し弁当について 建設現場で仕出し弁当を初めて頼むのですが、仕出し弁当は好きなメニューを毎日選べた 4 2023/06/23 20:00
- その他(ブラウザ) Amazonに掲載されている図書のURLについて 2 2022/12/13 10:31
- Visual Basic(VBA) Excel(VBA) 特定の条件に該当する行の値、書式を同じセルにコピ&ペーストしたいです 1 2022/05/21 18:18
- ニコニコ動画 お勧め、高画質・高音質、有料web録画ソフトをご紹介下さい。 2 2022/11/22 20:31
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
getElementsByNameで要素が取得...
-
SCRIPT5007: 未定義または NULL...
-
bodyタグのfocus
-
乱数を一定時間毎に表示させた...
-
JavaScriptでのEnterキーとAlt+...
-
function の return 値を表示し...
-
html javascript 作った配列を...
-
JavaScript でキーを送る
-
指定したセルにrowspan属性を適...
-
onkeydownの連続?
-
idHOGEで取得したinnerText(数...
-
JavaScriptでページ全体にトラ...
-
JavaScriptでiframeの内容を「...
-
リンク移動先のURLを取得
-
javascriptでブラウザに表示さ...
-
時間帯○時○分で表示切替
-
<a href="#" …>の意味を教えて...
-
テキストボックス内にハイパー...
-
別ファイルのfunctionの読み込み方
-
bodyにidをつける理由は何ですか?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
function の return 値を表示し...
-
getElementsByNameで要素が取得...
-
SCRIPT5007: 未定義または NULL...
-
JavaScriptでiframeの内容を「...
-
フォーカス移動抑止について
-
キーを押している間の時間を計...
-
JavaScript でキーを送る
-
bodyタグのfocus
-
ボタンのID名を取得するには?
-
JavaScriptでのEnterキーとAlt+...
-
リンク移動先のURLを取得
-
初心者javascript ウィンドウサ...
-
自動ジャンプでフォームデータ...
-
乱数を一定時間毎に表示させた...
-
jQuery ツールチップの中のリンク
-
idHOGEで取得したinnerText(数...
-
フレームサイズの変更について
-
AjaxでDBから取得したデータを...
-
JavaScriptでの西暦下2桁での表...
-
ページ全体を検索して特定文字...
おすすめ情報