エレベーターメニュー?というのでしょうか、スクロールについてくるメニューを作りたいと思うのですが上手くいかないのでアドバイスいただけないでしょうか。
一般的なエレベーターメニューは、メニューがスクロールする領域を確保してあり、そのスペース内でスクロールするのですが、今回行いたいことは、コンテンツ自体の上をまたいでスクロールするメニューを作りたく思います。
添付画像を見ていただきたいのですが。
赤色のDIVは全画面100%表示のコンテンツ、緑色は1000px程度中央配置のそれぞれコンテンツとなります。
そのコンテンツの上を、添付右上の青色のメニューがスクロールし下まで付いてくるイメージなのですが、幾つも試してみるのですが、このようにDIVコンテンツを跨いで付いてくるメニューが実現できませんでした。
このようなことは実現可能なのでしょうか?
技術的にjavascriptかな?と思いましたのでこちらを選択いたしましたが、カテ違いでしたら申し訳ありません。
お詳しい方いらっしゃいましたら、アドバイス頂けると助かります。
よろしくお願いいたします。
No.3ベストアンサー
- 回答日時:
何をされたいのか今ひとつ掴めませんが・・・
<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の値を変更すれば良いと思いますがどうでしょう。
No.2
- 回答日時:
これかな。
メニューを表示したい位置に配置しておいて、更にFixedで縦方向だけポジション設定。
position:fixedで、左端を親要素基準にする | Just Another Life
http://javelinadevil.wordpress.com/2012/07/09/po …
私のブログではサイドバーに、ソーシャルボタンを配置して縦方向だけポジション設定して、サイドバー内で固定してます。
有難う御座います。
ご指摘の方法ですが、添付画像の通り赤い枠の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%と緑色のピクセル指定の要素が交互に入り混じっているので、それらを特定の幅で固定する親要素という物を指定できず困っております。伝わりますでしょうか…。
やはり何かしらの基準となるピクセルなどの指定がある要素が不可欠でしょうか…。
No.1
- 回答日時:
スタイルシートで絶対値(fixed)ポジション設定してみればどうでしょう。
http://www.tagindex.com/stylesheet/box/position. …
http://blog.livedoor.jp/kamikaze_cyclone/archive …
ありがとう御座います。
ポジションだと確かに実現できるのですが、位置の固定が出来ません。
ちなみに、大本のページと赤色のDIV部分は画面いっぱいの100%指定です。
このように100%の中で決まった位置に指定しながらというのは実現不可能でしょうか?(決まった位置というのは固定ではなく、相対的に緑のDIVの隣り10pxの位置とか…という意味です。)
やはり、何かしらの基準となるpxなどで指定した状態で無ければ決まった位置には無理でしょうか、しかしそうするとやはりスクロールするメニューの実装が出来なくなってしまいます。
とても悩んでおります…。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
エクセルVBAでフォームのListbo...
-
PDFを(htmlのように)無限に縦...
-
Excelでワードアートや図を常に...
-
vb2005のwebbrowserで
-
文章の自動スクロール
-
大きい表へのスクロールバーの...
-
グループボックス内のコンボボ...
-
スクロールバーの動作で困って...
-
デジタル時計の時刻合わせの方...
-
マイページはどこを開くの
-
スクリプトって、何ですか?ど...
-
エクセルのシート上に別のシー...
-
Windows10、フォルダウインドウ...
-
ウインドウを毎回同じ位置、大...
-
一定時間おきにアラームやポッ...
-
Access VBA でForm位置を参照す...
-
ポップアップと作業ウィンドウ...
-
ポップアップウィンドウがブロ...
-
Excel操作 ウィンドウで出した...
-
リトルバスターズEXを中古で購...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Excelでワードアートや図を常に...
-
エクセルVBAでフォームのListbo...
-
PDFを(htmlのように)無限に縦...
-
リストビューをスクロールさせ...
-
大きい表へのスクロールバーの...
-
Visual Basicから Spreadのスク...
-
MFCでのスクロールバーの扱い
-
Excelの質問で票の途中に...
-
vb,netでtextboxの文字を右から...
-
Excelで一部分だけを常に表示さ...
-
Excelで1.2行目だけ固定して...
-
マウスオーバー→ホイール回転で...
-
ページ訪問時にiframe内を自動...
-
VBE画面の縦のスクロールバ...
-
リストビューのスクロールバー...
-
上下キーを押すと、ページスク...
-
webページで横方向にアンカーを...
-
ポストバック時のスクロール位...
-
IFRAMEでscrolling="yes|no"の...
-
アコーディオンで開かれたパネ...
おすすめ情報