DIVを越えて付いてくるメニューについて

解決済

質問者：yuyukina
質問日時：2014/12/21 10:21
回答数：3件

エレベーターメニュー？というのでしょうか、スクロールについてくるメニューを作りたいと思うのですが上手くいかないのでアドバイスいただけないでしょうか。

一般的なエレベーターメニューは、メニューがスクロールする領域を確保してあり、そのスペース内でスクロールするのですが、今回行いたいことは、コンテンツ自体の上をまたいでスクロールするメニューを作りたく思います。

添付画像を見ていただきたいのですが。

赤色のDIVは全画面100％表示のコンテンツ、緑色は1000px程度中央配置のそれぞれコンテンツとなります。

そのコンテンツの上を、添付右上の青色のメニューがスクロールし下まで付いてくるイメージなのですが、幾つも試してみるのですが、このようにDIVコンテンツを跨いで付いてくるメニューが実現できませんでした。

このようなことは実現可能なのでしょうか？
技術的にjavascriptかな？と思いましたのでこちらを選択いたしましたが、カテ違いでしたら申し訳ありません。

お詳しい方いらっしゃいましたら、アドバイス頂けると助かります。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： DoubtOwl
回答日時：2015/01/06 11:10

何をされたいのか今ひとつ掴めませんが・・・

<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の値を変更すれば良いと思いますがどうでしょう。

- 0
- 件

通報する

No.2

回答者： mikinon
回答日時：2014/12/21 21:34

これかな。

メニューを表示したい位置に配置しておいて、更にFixedで縦方向だけポジション設定。

position:fixedで、左端を親要素基準にする | Just Another Life
http://javelinadevil.wordpress.com/2012/07/09/po …

私のブログではサイドバーに、ソーシャルボタンを配置して縦方向だけポジション設定して、サイドバー内で固定してます。

- 0
- 件

通報する

この回答へのお礼

有難う御座います。

ご指摘の方法ですが、添付画像の通り赤い枠の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％と緑色のピクセル指定の要素が交互に入り混じっているので、それらを特定の幅で固定する親要素という物を指定できず困っております。伝わりますでしょうか…。

やはり何かしらの基準となるピクセルなどの指定がある要素が不可欠でしょうか…。

通報する

お礼日時：2014/12/24 12:35

No.1

回答者： mikinon
回答日時：2014/12/21 13:20

スタイルシートで絶対値（fixed）ポジション設定してみればどうでしょう。

http://www.tagindex.com/stylesheet/box/position. …

http://blog.livedoor.jp/kamikaze_cyclone/archive …

- 0
- 件

通報する

この回答へのお礼

ありがとう御座います。

ポジションだと確かに実現できるのですが、位置の固定が出来ません。
ちなみに、大本のページと赤色のDIV部分は画面いっぱいの100％指定です。

このように100％の中で決まった位置に指定しながらというのは実現不可能でしょうか？（決まった位置というのは固定ではなく、相対的に緑のDIVの隣り10ｐｘの位置とか…という意味です。）

やはり、何かしらの基準となるpxなどで指定した状態で無ければ決まった位置には無理でしょうか、しかしそうするとやはりスクロールするメニューの実装が出来なくなってしまいます。

とても悩んでおります…。

通報する

お礼日時：2014/12/21 16:38

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！