質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

517閲覧

スクロールしたら表示させたい

yes111

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/08/14 08:38

メニューをスクロールしたら表示させたいです。
今の記述だと消えてずっと出てこないです。ご教授ください

<div class="menu"> <div class="navToggle"> <span></span><span></span><span></span><span>menu</span> </div> <nav class="globalMenuSp"> <ul> <li><a href="#c01">部分日食</a></li> <li><a href="#c02">カッシーニ</a></li> <li><a href="#c03">メテオ</a></li> <li><a href="#c04">ヘルブレイム</a></li> <li><a href="#c05">バルログ</a></li> <li><a href="#c06">前方開放</a></li> <li><a href="#c07">後方開放</a></li> <li><a href="#c08">大解放</a></li> <li><a href="#c09">はやぶさ</a></li> <li><a href="#c10">フラミンゴ</a></li> </ul> </nav> </div><!-- .menu --> ----------------------------------------------------- $(function() { var topBtn = $('.navToggle'); topBtn.hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 100) { //ボタンの表示方法 topBtn.fadeIn(); } else { //ボタンの非表示方法 topBtn.fadeOut(); } }); }); ----------------------------------------------------- nav.globalMenuSp { position: fixed; z-index: 2; /* top: 0;*/ top: 0; /* left: 0;*/ right: 60px; /* background: #fff;*/ color: #000; text-align: center; -moz-transform: translateY(0%); -webkit-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(-100%); transition: all 0.6s; width: 150px; } nav.globalMenuSp ul { /*background-color: rgba(204,204,204, .8);*/ background: #f4efef; margin: 0 auto; padding: 0; width: 100%; } nav.globalMenuSp ul li { font-size: 1.5rem; list-style-type: none; padding: 0; width: 100%; border-bottom: 1px dotted #333; } nav.globalMenuSp ul li:last-child { padding-bottom: 0; border-bottom: none; } nav.globalMenuSp ul li a { display: block; color: #000; line-height: 2.5; } nav.globalMenuSp ul li a:hover { color: #dc234a; /* background-color: rgba(51,51,51, .8);*/ background: #d0cbcb; } /* このクラスを、jQueryで付与・削除する */ nav.globalMenuSp.active { -moz-transform: translateY(0%); -webkit-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .navToggle { display: block; position: fixed; right: 18px; top: 2rem; width: 52px; height: 60px; cursor: pointer; z-index: 3; background: #666; text-align: center; } @media screen and (max-width: 640px) { .navToggle { top: 20%; } } .navToggle span { display: block; position: absolute; width: 40px; border-bottom: solid 3px #eee; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; left: 6px; } .navToggle span:nth-child(1) { top: 9px; } .navToggle span:nth-child(2) { top: 18px; } .navToggle span:nth-child(3) { top: 27px; } .navToggle span:nth-child(4) { border: none; color: #eee; font-size: 14px; font-weight: bold; top: 34px; } /* 最初のspanをマイナス45度に */ .navToggle.active span:nth-child(1) { top: 18px; left: 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } /* 2番目と3番目のspanを45度に */ .navToggle.active span:nth-child(2), .navToggle.active span:nth-child(3) { top: 18px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyoya0819

2019/08/14 11:30

ソースごとにMarkDownを分けていただくと見易いです。 あと、Markdownの最初の```の右側には言語名を書いてください。
guest

回答1

0

まさかjQuery読み込んでないってことはないですよね?
jQuery読み込んだらおそらく質問者さんがやりたいことができました。

ソース
フルビュー

jQueryを読み込んでるかどうかの確認はソースのURLに飛んで貰ってSettings > JavaScriptです

投稿2019/08/14 11:36

kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyoya0819

2019/08/14 11:50

補足というより注意ですがフルビューでスクロール後、すぐにmenuが消えてしまいます。(スクロールできる場合で一部のブラウザ) しかし、これは本文の高さのゼロのため以下のようなことが起こっているためです。 ページ最上部から100以上スクロールする->menuが表示->上に自動的に戻される->スクロールされたと判定->ページ上部から100以下になる->メニュー非表示 まぁ、スマホなどの一部の端末で本文がない時に起こる挙動なので実際には問題がないと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問