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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

837閲覧

【jQuery】画面をトップから600px以上スクロールダウンした時のみバナーを表示させたい

MsParrot

総合スコア4

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/02/17 10:25

編集2021/02/18 02:10

お世話になります。タイトルのとおりjQueryで画面をトップから600px以上スクロールダウンした時のみバナーを表示させようとしていますが、表示されません。teratailに投稿済みの類似ケースも参照してみましたがうまくいきません。どなたかご教示いただけますでしょうか?どうぞ宜しくお願いいたします。

html

1 2 <div class="top-logo"> 3 <a href="#"> 4 <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" style="display:block;height:36px;width:36px;fill:#210034" aria-label="Airbnb" role="img" focusable="false"><path d="m16.5 <!--文字数の関係で省略-->"></path></svg> 5 </a> 6 </div> 7 8 <div id="top-banner"> 9 <a href="#"> 10 <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" style="display:block;height:36px;width:36px;fill:#210034" aria-label="Airbnb" role="img" focusable="false"><path d="m16.5<!--文字数の関係で省略-->"></path></svg> 11 </a> 12 <button type="button" class="btn btn-danger">はじめる</button> 13 </div> 14 15 <div class="rates"> 16 <div class="rates-container"> 17 18 <div class="msg-container"> 19 <p>予想ホスティング収入額をチェック</p> 20 21 <h1><span class="city">Mumbai</span>でホスティングして、ひと月あたり最大<span class="amount">¥ 47,608</span>の収入を得ましょう</h1> 22 23 <a href="#">予想ホスティング収入額の計算方法</a> 24 </div> 25 26 <div class="rates-buffer"></div> 27 28 <div class="form-container"> 29 <p class="form-message"> 予想ホスティング収入額を更新するにはお部屋についてさらに詳しくお聞かせください</p> 30 31 <input type="text" id="address-input" name="location" placeholder="所在地" role="combobox" value=""> 32 <div id="room-type-dropdown"> 33 <p class="dropdown-txt">まるまる貸切</p> 34 <p id="rt-down-arrow"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" focusable="false" style="display: block; fill: none; height: 16px; width: 16px; stroke: currentcolor; stroke-width: 4; overflow: visible;"><g fill="none"><path d="m28 12-11.2928932 11.2928932c-.3905243.3905243-1.0236893.3905243-1.4142136 0l-11.2928932-11.2928932"></path></g></svg></p> 35 </div> 36 <div id="guest-count-dropdown"> 37 <p class="dropdown-txt">ゲスト4人</p> 38 <p id="gc-down-arrow"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" focusable="false" style="display: block; fill: none; height: 16px; width: 16px; stroke: currentcolor; stroke-width: 4; overflow: visible;"><g fill="none"><path d="m28 12-11.2928932 11.2928932c-.3905243.3905243-1.0236893.3905243-1.4142136 0l-11.2928932-11.2928932"></path></g></svg></p> 39 </div> 40 <div class="special-space"> 41 <a href="#"><span>+</span> ゲストが利用できる特別なスペースがあればお知らせください</a> 42 </div> 43 <button type="button" class="btn btn-listing">リスティングの掲載をはじめる</button> 44 </div> 45 46 <hr> 47 </div> 48 </div>

CSS

1*{ 2 margin: 0; 3 padding: 0; 4 font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; 5} 6 7.top-logo { 8 position: top; 9 background-color:#F2ECE2; 10 padding: 24px 0px 0px 24px; 11 width: 100%; 12 margin: 0 auto; 13} 14 15#top-banner { 16 display: none; 17} 18 19.fixed { 20 background-color: white; 21 width: 100vw; 22 height: 72px; 23 box-shadow: 0 0 40px 0 rgb(206, 206, 206); 24 position: absolute; 25 top: 0; 26 right: 0; 27 display: flex; 28 justify-content: space-between; 29} 30 31#top-banner a { 32 display: inline-block; 33 margin-left:40px; 34 margin-top: 18px; 35} 36 37#top-banner button{ 38 display: inline-block; 39 margin-right: 80px; 40 margin-top: 20px; 41 width: 90px; 42 height: 36px; 43 font-size: 14px; 44} 45 46 47.rates { 48 background-color: #F2ECE2; 49 width: 100vw; 50 height: 520px; 51 margin: 0 auto; 52} 53 54.rates-container { 55 background-color:#F2ECE2; 56 display: flex; 57 justify-content: center; 58 height: 520px; 59 max-width: 1530px; 60 padding-left: 60px; 61 padding-right: 80px; 62 margin: 0 auto; 63} 64 65.msg-container { 66 display:block; 67 padding-top: 96px; 68 padding-left: 5px; 69 width: 42%; 70 min-width: 395px; 71} 72 73.msg-container p { 74 font-weight: bold; 75 font-size: 18px; 76 margin-bottom: 40px; 77 line-height: 22px; 78 letter-spacing: 0.07em; 79 text-transform: uppercase; 80} 81 82.msg-container h1 { 83 font-weight: 700; 84 font-size: 42px; 85 margin-bottom: 28px; 86 letter-spacing: 0.01em; 87} 88 89 90.city { 91 font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 92 font-size: 44px; 93} 94 95.amount { 96 color: #e41e57; 97 font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 98 font-size: 38px; 99} 100 101.msg-container a { 102 color: black; 103 font-size: 14px; 104 cursor: pointer; 105 font-weight: 600; 106} 107 108.rates-buffer { 109 display: block; 110 background-color:#F2ECE2; 111 width: 120px; 112 max-width: 200px; 113 min-width: 71px; 114 height: 520px; 115} 116 117.form-container { 118 display: block; 119 box-shadow: 0 0 20px rgb(206, 206, 206); 120 width: 545px; 121 height: 432px; 122 background-color: #fff; 123 border-radius: 15px; 124 margin-top: 0; 125 margin-bottom: 95px; 126} 127 128.form-message { 129 color: #222222; 130 font-size: 18px; 131 line-height: 24px; 132 padding: 0px 8px 12px 8px; 133 margin: 26px 30px 16px 30px; 134} 135 136#address-input { 137 width: 480px; 138 height: 57px; 139 margin-left: 34px; 140 margin-right: 32px; 141 padding-left: 10px; 142 border-radius: 8px 8px 0px 0px; 143 border-color: rgb(176,176,176); 144 border-width: 1px; 145 z-index: 0; 146} 147 148 149#rt-down-arrow, #gc-down-arrow { 150 padding-right: 18px; 151 padding-top: 10px; 152 color: #000000; 153} 154 155#rt-down-arrow:hover, #gc-down-arrow:hover { 156 cursor: pointer; 157} 158 159.dropdown-txt { 160 padding-top: 16px; 161} 162 163#room-type-dropdown { 164 display: flex; 165 flex-direction: row; 166 flex-wrap: nowrap; 167 align-items: center; 168 justify-content: space-between; 169 border-style: solid; 170 border-color: rgb(176,176,176); 171 border-top: none; 172 border-width: 1px; 173 width: 480px; 174 height:57px; 175 padding-left: 10px; 176 margin-bottom: 0; 177 margin-left: 34px; 178 margin-right: 32px; 179} 180 181#guest-count-dropdown { 182 display: flex; 183 flex-direction: row; 184 flex-wrap: nowrap; 185 align-items: center; 186 justify-content: space-between; 187 width: 480px; 188 height: 57px; 189 margin-left: 34px; 190 margin-right: 32px; 191 padding-left: 10px; 192 border:solid; 193 border-top: none; 194 border-radius: 0px 0px 8px 8px; 195 border-color: rgb(176,176,176); 196 border-width: 1px; 197 z-index: 0; 198} 199 200.special-space a { 201 text-decoration: none; 202 color: black; 203 font-weight: bold; 204 line-height: 66px; 205 font-size: 14px; 206 margin-left: 34px; 207} 208 209.special-space span{ 210 font-size: 20px; 211} 212 213.btn-listing{ 214 width: 480px; 215 height: 57px; 216 background-color:black; 217 color: white; 218 border-radius: 8px; 219 margin-left: 34px; 220} 221

js

1$(function(){ 2 var topBanner = $('#top-banner'); 3 $(window).scroll(function(){ 4 if($(this).scrollTop() > 600) { 5 topBanner.addClass('fixed'); 6 } 7 else { 8 topBanner.removeClass('fixed'); 9 } 10 }) 11});

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

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

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

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

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

mattari_panda

2021/02/17 14:11

可能でしたら全体のHTML+CSSも提示してもらえると、アドバイスしやすくなります。 外に出してはまずいテキストなどはダミーのものに差し替えたりしてください。 現状のHTML+CSSではおそらくこうだろうという不正確な回答しかできないです。
MsParrot

2021/02/18 02:12

ご指摘ありがとうございます。svgで文字数を使っていたため省略し、前後のHTMLおよびCSSを追加いたしました。どうぞ宜しくお願いいたします。
guest

回答2

0

こんにちは。

詳細度の問題でしょう。

css

1#top-banner { 2 display: none; /* 詳細度100でこれが勝つ */ 3} 4 5.fixed { 6 display: flex; /* 詳細度010でこれは負け */ 7}

参考:

CSS には書かれたスタイルを適用する優先順位があって、まず1番目に上から順番に「当てる」というのと、その次に詳細度という順番によって「当てる」という、ふたつのルールがあります。

100年後も崩れないCSS勉強会 · 第1回「詳細度」


ただ、これ、position:absoluteだと表示されてもスクロールで隠れてると思うのですが、それは大丈夫なんですか?

投稿2021/02/18 02:31

Lhankor_Mhy

総合スコア35865

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

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

MsParrot

2021/02/18 10:37

position: absoluteについてのご指摘ありがとうございました!無事解決いたしました。
guest

0

自己解決

1.CSSで#top-bannerをposition:fixed;にする
2.jQueryで画面を600px以上スクロールダウンしたときにCSSのdisplayをnoneからflexに切り替える

以上の修正で解決いたしました。

コードはこちらです。

HTML

1 2 <div class="top-logo"> 3 <a href="#"> 4 <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" style="display:block;height:36px;width:36px;fill:#210034" aria-label="Airbnb" role="img" focusable="false"><path d="m16.5(以下省略)"></path></svg> 5 </a> 6 </div> 7 8 <div id="top-banner"> 9 <a href="#"> 10 <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" style="display:block;height:36px;width:36px;fill:#210034" aria-label="Airbnb" role="img" focusable="false"><path d="m16.5 (以下省略)"></path></svg> 11 </a> 12 <button type="button" class="btn btn-danger">はじめる</button> 13 </div> 14 15

CSS

1*{ 2 margin: 0; 3 padding: 0; 4 font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; 5} 6 7.top-logo { 8 position: top; 9 background-color:#F2ECE2; 10 padding: 24px 0px 0px 24px; 11 width: 100vw; 12 margin: 0 auto; 13} 14 15#top-banner { 16 background-color: white; 17 width: 100vw; 18 height: 72px; 19 box-shadow: 0 0 40px 0 rgb(206, 206, 206); 20 position: fixed; 21 top: 0; 22 right: 0; 23 display: none; 24 justify-content: space-between; 25} 26

js

1$(function(){ 2 $(window).scroll(function(){ 3 if($(this).scrollTop() >= 600) { 4 $('#top-banner').css('display', 'flex'); 5 } 6 else if($(this).scrollTop() < 600) { 7 $('#top-banner').css('display', 'none'); 8 } 9 }) 10 });

投稿2021/02/18 10:34

編集2021/02/18 11:17
MsParrot

総合スコア4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問