- 締切済み
DIVを越えて付いてくるメニューについて
エレベーターメニュー？というのでしょうか、スクロールについてくるメニューを作りたいと思うのですが上手くいかないのでアドバイスいただけないでしょうか。 一般的なエレベーターメニューは、メニューがスクロールする領域を確保してあり、そのスペース内でスクロールするのですが、今回行いたいことは、コンテンツ自体の上をまたいでスクロールするメニューを作りたく思います。 添付画像を見ていただきたいのですが。 赤色のDIVは全画面100％表示のコンテンツ、緑色は1000px程度中央配置のそれぞれコンテンツとなります。 そのコンテンツの上を、添付右上の青色のメニューがスクロールし下まで付いてくるイメージなのですが、幾つも試してみるのですが、このようにDIVコンテンツを跨いで付いてくるメニューが実現できませんでした。 このようなことは実現可能なのでしょうか？ 技術的にjavascriptかな？と思いましたのでこちらを選択いたしましたが、カテ違いでしたら申し訳ありません。 お詳しい方いらっしゃいましたら、アドバイス頂けると助かります。 よろしくお願いいたします。
- yuyukina
- お礼率66% (251/380)
- JavaScript
- 回答数3
- ありがとう数8
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- DoubtOwl
- ベストアンサー率50% (63/124)
何をされたいのか今ひとつ掴めませんが・・・ <body> <div class="A">画面いっぱい100％</div> <div class="B">500px margin:0 auto;</div> <div class="A">画面いっぱい100％</div> <div class="B">500px margin:0 auto;</div> <div class="A">画面いっぱい100％</div> <div class="B">500px margin:0 auto;</div> <div style="position:fixed;top:10px;right:100px;background-color:gray;"> menu </div> こういうことでしょうか？ メニューの位置を変えたいのであればonloadやonresizeイベントで緑色のコンテンツの幅とウインドウの幅から メニューのrightやleftの値を変更すれば良いと思いますがどうでしょう。
- mikinon
- ベストアンサー率56% (613/1076)
これかな。 メニューを表示したい位置に配置しておいて、更にFixedで縦方向だけポジション設定。 position:fixedで、左端を親要素基準にする | Just Another Life http://javelinadevil.wordpress.com/2012/07/09/positionfixed%E3%81%A7%E3%80%81%E5%B7%A6%E7%AB%AF%E3%82%92%E8%A6%AA%E8%A6%81%E7%B4%A0%E5%9F%BA%E6%BA%96%E3%81%AB%E3%81%99%E3%82%8B/ 私のブログではサイドバーに、ソーシャルボタンを配置して縦方向だけポジション設定して、サイドバー内で固定してます。
- mikinon
- ベストアンサー率56% (613/1076)
スタイルシートで絶対値（fixed）ポジション設定してみればどうでしょう。 http://www.tagindex.com/stylesheet/box/position.html http://blog.livedoor.jp/kamikaze_cyclone/archives/19186302.html
お礼
ありがとう御座います。 ポジションだと確かに実現できるのですが、位置の固定が出来ません。 ちなみに、大本のページと赤色のDIV部分は画面いっぱいの100％指定です。 このように100％の中で決まった位置に指定しながらというのは実現不可能でしょうか？（決まった位置というのは固定ではなく、相対的に緑のDIVの隣り10ｐｘの位置とか…という意味です。） やはり、何かしらの基準となるpxなどで指定した状態で無ければ決まった位置には無理でしょうか、しかしそうするとやはりスクロールするメニューの実装が出来なくなってしまいます。 とても悩んでおります…。
お礼
有難う御座います。 ご指摘の方法ですが、添付画像の通り赤い枠のDIVは常に画面いっぱいの100％指定を行いたいので、何かしらの親要素で囲んでしまうと赤枠が親要素の範囲でしかいっぱいの表示にならないので困っています。 <div class="A">画面いっぱい100％</div> <div class="B">500px margin:0 auto;</div> <div class="A">画面いっぱい100％</div> <div class="B">500px margin:0 auto;</div> <div class="A">画面いっぱい100％</div> <div class="B">500px margin:0 auto;</div> … こんな感じです。行いたいのは<div class="B">の横辺りに固定で下までスクロールするメニューを設置したい。 コンテンツ部分には赤色のDIV100％と緑色のピクセル指定の要素が交互に入り混じっているので、それらを特定の幅で固定する親要素という物を指定できず困っております。伝わりますでしょうか…。 やはり何かしらの基準となるピクセルなどの指定がある要素が不可欠でしょうか…。