• 締切済み

エレベーターメニュー

サイドのメニューがスクロールにと同時にスクロールされる、エレベーターメニューのスクリプトをこちらからダウンロードさせていただきました。↓↓↓ http://www.sonicjam.co.jp/soniclabs/?p=3 いろいろなものを試したのですが、ブラウザによって表示がちがったたり、となかなかうまくいかなかったのですが、こちらからダウンロードさせていただいたものは、どのブラウザでも同じように表示され、とても簡単に設置でき、とても使いやすくて気に入っています。 ただひとつ、一番下まで行くと、フッターの上にメニューがかぶってしまいます。好きな位置で停止できるように、編集したいのですがJavascriptがまったく分かりません・・・。どなたかどこをどう編集したら好きな位置で止められるか分かる方がいらっしゃいましたら、ご教授していただけませんでしょうか。 どうぞよろしくお願いいたします。

みんなの回答

  • HIRSYU
  • ベストアンサー率51% (45/87)
回答No.1

ダウンロードしたものの中にあるsample3.htmlでclass="scrolllayerfixed"とあるヤツとは別ですか?

tama-2009
質問者

お礼

はい、scrolllayerfixed ではありません。 別のスクリプトを使うことで解決いたしました。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • エレベーターメニューとシンクボックスとロールオーバーの機能を両立させた

    エレベーターメニューとシンクボックスとロールオーバーの機能を両立させたい。 現在こちらのサイトのように http://momonini.web.fc2.com/test.html scrolllayer.js、jquery.js、thickbox.js、yuga.jsなどのスクリプトを 同時に使っています。 ロールオーバーやthickbox.jsなどyuga.jsの機能はきくものの scrolllayer.jsが動かないのです。 (↑画面のスクロールにあわせてカレンダーがスルスル移動するスクリプトです) htmlのscrolllayer.jsの読み込みをyugaの下にすると、 yuga.jsがきかず、scrolllayer.jsが動きます。 (yuga.jsと一緒にダウンロードしたjquery.jsというファイルを消してもscrolllayer.jsが機能します) どのようにすればスクロールとシンクボックスとロールオーバーの 機能を両立させられるのでしょうか? よろしければご教授お願いします。 javascriptに全然詳しくありません。 わかりにくい質問でしたら申し訳ありません。

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

    エレベーターメニュー?というのでしょうか、スクロールについてくるメニューを作りたいと思うのですが上手くいかないのでアドバイスいただけないでしょうか。 一般的なエレベーターメニューは、メニューがスクロールする領域を確保してあり、そのスペース内でスクロールするのですが、今回行いたいことは、コンテンツ自体の上をまたいでスクロールするメニューを作りたく思います。 添付画像を見ていただきたいのですが。 赤色のDIVは全画面100%表示のコンテンツ、緑色は1000px程度中央配置のそれぞれコンテンツとなります。 そのコンテンツの上を、添付右上の青色のメニューがスクロールし下まで付いてくるイメージなのですが、幾つも試してみるのですが、このようにDIVコンテンツを跨いで付いてくるメニューが実現できませんでした。 このようなことは実現可能なのでしょうか? 技術的にjavascriptかな?と思いましたのでこちらを選択いたしましたが、カテ違いでしたら申し訳ありません。 お詳しい方いらっしゃいましたら、アドバイス頂けると助かります。 よろしくお願いいたします。

  • z-indexを用いた常にウィンドウ上部に表示されるメニュー

    こんばんは。 今CSSでんなメニューの見せ方をしたいのですが、 どうも上手くいかなくて困っています。 どなたか教えていただけませんでしょうか。 【参考サイト】 http://www.ellegarden.jp/ja/index.asp このフッターの部分をトップメニューとして、 常にウィンドウの上部に表示されるようにしたいと思っています。 上部に位置することは出来るんですが、 ウィンドウをスクロールしたときに、 他のコンテンツといっしょに移動してしまいます。 スクロールをしても位置が変わらない方法が分かりません。 ※できればフッターの部分にbackground-imageでpng透過を使いたいと思っているので、 overflow: autoの使わずにz-indexを使った方法ですと助かります。 またjavascriptが必要であれば、それを使った方法でも構いません。 パンク寸前なので上手く説明できてるか自分で定かではないですが、 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • jQuery|エレベーターメニューにおいて

    こんにちは、 画面スクロールに対して要素が後追いする、いわゆるエレベーターメニューにおいて、その要素がウィンドウ高よりも大きいと、ひたすらに画面下部を掘り進んでしまいます・・といってもわからないと思うので、お手数ですが、下記URLをご参照頂けますでしょうか。 http://www.geocities.jp/fumiefumifumi/menu.html ウィンドウ高を縮めた後、ページ下部までスクロールすると、わかって頂けると思います。cssにてメニュー(#navBox)にposition:absoluteをかけ、以下のスクリプトで動かしています。わからないなりにいろいろいじくってみたのですが、不具合を解決することができませんでした。 var name = "#navBox"; var menuYloc = null; $(function(){ menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) $(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+"px"; $(name).animate({top:offset},{duration:700,queue:false}); }); 右側メインのボックス下部とメニューボックスの下部が揃う状態、もしくはposition:fixedと同じ状態になるのが理想です。 不具合を解消する方法をご存じの方、いらっしゃいましたら、どうかよろしくお願いします。

  • HTML5で、メニューボタンを固定位置にする方法

    HTML5で、メニューボタンをスクロールしても固定位置に表示する方法を教えてください。 今回はスマートフォン向けのサイトです。 CSSやJavascriptで実現できる方法はいくつかあるのですが、スマートフォンではうまく機能しません。 HTML5では機能しなかったり、スマホブラウザでは機能しなかったり・・・。 よろしくお願いいたします。

  • メニューバーもスクロールに合わせて動く仕組み

    Javascriptの方に質問を出したのですが、 回答していただけなかったのでこちらでも質問させてください(;_;) 左側に縦メニューのあるスタイルシートでレイアウトしたXHTMLのページを作成しています。 コンテンツでブラウザにスクロールバーがついたときに、メニューバーもスクロールに合わせて動く仕組みを JavaScriptでいれました。 <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 F1() { v='.pixelTop=';dS='';sD='.style';y='document.body.scrollTop';} function F2() { obj='obj1';yy=eval(y);eval(dS+obj+sD+v+yy);setTimeout('F2()',10);} </script> </head> <body onload="F1();F2();"> <div class="menu" id='obj1' style='position:absolute;left:auto; top:90px;'> <script type="text/javascript"> for(var i=0;i<100;i++){document.write('<br>')} </script> 動作はするのですが、限りなくスクロールするため、下のほうのメニューが 見えなくなってしまいます。 http://allabout.co.jp/internet/javascript/closeup/CU20010713/index.htmで 紹介されているものも挑戦したのですがなかなかうまくいきません。 上のメニューのような一定の場所の間を動かすようにしたいのですが、どう改善したらよいでしょうか?

    • ベストアンサー
    • HTML
  • プルダウンメニューの位置がずれてしまいます

    質問させてください。 メニューボタンにマウスオーバーすると下にサブメニューが表示される、プルダウンメニューを作成しています。(階層メニューというのでしょうか?) Dreamweaverでレイヤーを使って作っているのですが、サブメニューの表示位置がずれてしまって困っています。 以前ご質問させていただき、一番外のTableを中央揃えにしているため、レイヤーの「position」が”absolute”だと画面の大きさによって位置が変わってしまうことがわかりました。 そこで”relative”にすればいいのかと思ったのですが、そうするとDreamweaverの「レイヤー」(←表示/非表示やz-indexを設定したりするプロパティ)から消えてしまうのです。 たぶん、レイヤーとして認識されていないのだと思います。 自分なりに調べ、Javascriptでブラウザの幅-Tableの幅÷2を求め、そこを基点にして”absolute”にすればいいというところまではわかったのですが、知識不足のためいろいろ試してみてもJavascriptエラーになってしまって・・・。 どのように書けばいいのかお教えいただけると、大変助かります。 よろしくお願いいたします。

  • マウスオーバーのメニューについて

    お世話になります。 現在、オンマウスでメニュー画像が表示される仕組みを作成しているのですが、別のメニューにする方法がわかりません。 たとえば、「MAIN」と「LINK」のメニューがあるとして、MAINはMAINのメニュー、LINKはLINKのメニューが表示されるという方法です。 http://memorva.jp/memo/html/js_css_menu_mover.php 上記のURLの方法なのですが。 この場合、cssの数値を変えて(css12ならcss13)スクリプトを追加すればいいのでしょうが、その方法でやっても、同じ画像が表示されます。 (css13のスクリプトを新しく書き加えたのにブラウザでプレビューするとcss12の内容が表示されてしまいます。) ↓HEAD内のCSS設定部分は下記のように分割して書いてます <script language="javascript"> <!-- function mOver(){ css12.style.display = "block"; } function mOut(){ css12.style.display = "none"; } //--> </script> <script language="javascript"> <!-- function mOver(){ css13.style.display = "block"; } function mOut(){ css13.style.display = "none"; } //--> </script> よろしくお願い致します。

    • ベストアンサー
    • HTML
  • JavaScriptで、ブラウザのスクロール?

    JavaScriptで、ページを表示後に一番下にスクロールするように動作させたいのですが どうすればよいでしょうか? ブラウザはIE6.0を使っております。 JavaScriptはあまり使わないのですが、ブラウザによって動作が異なったり動作しない場合があると 思いますが、上のようなスクリプトは簡単にできるものでしょうか?

  • ブログのサイドメニューの過去記事を整理したい

    サイドメニューの過去記事の数が増えて長くなりすぎました。スクロール式にするなどの整理をしたいのですが、編集の方法がわかりません。どなたか、ご教示ください、お願いします。