- ベストアンサー
メニューバーもスクロールに合わせて動く仕組み
- 左側に縦メニューのあるスタイルシートでレイアウトしたXHTMLのページを作成しています。コンテンツでブラウザにスクロールバーがついたときに、メニューバーもスクロールに合わせて動く仕組みをJavaScriptで実装しました。
- 動作はするのですが、限りなくスクロールするため、下のほうのメニューが見えなくなってしまいます。http://allabout.co.jp/internet/javascript/closeup/CU20010713/index.htmで紹介されているものも試しましたがうまくいきません。
- 上のメニューのような一定の場所の間を動かすように改善したいです。
- go_and_goes
- お礼率50% (43/86)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function f(){ var e=document.getElementById('orz'); e.style.top=(document.body.scrollTop/(document.body.scrollHeight-document.body.clientHeight))*(document.body.scrollHeight-e.clientHeight); setTimeout(f,10); } </script> </head> <body onload="f();"> <div class="menu" id="orz" style="position:absolute;border:solid 0px;left:auto;top:0px;width:200px"> <script type="text/javascript"> for(var i=0;i<50;++i){document.write(i+"<br/>");} </script> </div> <div class="contents" style="position:absolute;border:solid 2px;top:0px;left:200px;height:3000px;">コンテンツ</div> </html> こういうことかな？ 確実に使いにくそうなメニューですが・・・。
その他の回答 (2)
- talepanda
- ベストアンサー率58% (45/77)
＞コンテンツの高さの間のみでメニューをスクロール つまり、一番下までスクロールしたときに、メニューバーにはどうなっていて欲しいのしょうか？ コンテンツの底辺と、メニューバーの底辺が一致する、ということですか？ また、一番上を表示しているときは、コンテンツの上辺とメニューバーの上辺が一致する、ということでしょうか？ 多少冗長でもいいので、どういうことがしたいのかわかるように説明してもらえたら、可能か不可能か、可能であればどうやればいいのか、お答えできると思います。
お礼
ご返答ありがとうございます。 そうなんです。コンテンツの下の方を見ているときはコンテンツの底辺と、メニューバーの底辺が一致して、ページにアクセスした際や一番上を表示しているときは、コンテンツの上辺とメニューバーの上辺が一致するといった表示方法にしたいのです。 分かりづらい説明ですみません。 また、メニューのサイズですが、ブラウザの高さより確実にはみ出します（1000px位あります）。
- talepanda
- ベストアンサー率58% (45/77)
＞動作はするのですが、限りなくスクロールするため、下のほうのメニューが ＞見えなくなってしまいます。 表示位置固定で、メニューの高さがウィンドウの高さより大きいわけですから、どんなにスクロールしてもはみ出た部分は表示されないでしょう。 ＞上のメニューのような一定の場所の間を動かすようにしたいのですが もう少し詳しくお願いします。 表示位置を固定しなければいいだけでは？とも思うのですが。
お礼
回答有難うございます。 左側にこのスクロールするメニューがあって右側にはメニューよりも 高さのあるコンテンツが入るようになってます。 ┏━┳━━━━┓ こんなレイアウトになってま す。 分かりづらくてすみません。 ┃メ┃ コ ┃ 固定の指定を取ってみたのですが、動きが変わりませんでした。 ┃二┃ ン ┃ コンテンツの高さの間のみでメニューをスクロール ┃ュ┃ テ ┃ させることはやはり不可能なのでしょうか(>_<)? ┃｜┃ ン ┃ ： ： ツ ┃ ： ： ┃ ┗━━━━━━┛
補足
何度もすみません(;_;) メニューのスクロールが限りなくスクロールするという現象ですが、右側のコンテンツや一番下に表示させているCopyrightの部分までも通り越して下のほうまでスクロールしていくんです(>_<)
お礼
ご返答ありがとうございます。 表示できました(＾_＾)! 本当に有難うございました！