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

Question

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

    <div class="top-logo">
      <a href="#">
      <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>
      </a>
    </div>

    <div id="top-banner">
      <a href="#">
        <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>
        </a>
      <button type="button" class="btn btn-danger">はじめる</button>
    </div>

 <div class="rates">
    <div class="rates-container">

        <div class="msg-container">
            <p>予想ホスティング収入額をチェック</p>

            <h1><span class="city">Mumbai</span>でホスティングして、ひと月あたり最大<span class="amount">¥ 47,608</span>の収入を得ましょう</h1>

            <a href="#">予想ホスティング収入額の計算方法</a>
        </div>

        <div class="rates-buffer"></div>

        <div class="form-container">
            <p class="form-message"> 予想ホスティング収入額を更新するにはお部屋についてさらに詳しくお聞かせください</p>

            <input type="text" id="address-input" name="location" placeholder="所在地" role="combobox" value="">
            <div id="room-type-dropdown">
              <p class="dropdown-txt">まるまる貸切</p>
              <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>
            </div>
            <div id="guest-count-dropdown">
              <p class="dropdown-txt">ゲスト4人</p>
              <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>
            </div> 
            <div class="special-space">
              <a href="#"><span>+</span> ゲストが利用できる特別なスペースがあればお知らせください</a>
            </div>
            <button type="button" class="btn btn-listing">リスティングの掲載をはじめる</button> 
        </div>    
        
        <hr>
    </div>
  </div>

*{
    margin: 0;
    padding: 0;
    font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
}

.top-logo {
    position: top;
    background-color:#F2ECE2;
    padding: 24px 0px 0px 24px;
    width: 100%;
    margin: 0 auto;
}

#top-banner {
    display: none;
}

.fixed {
    background-color: white;
    width: 100vw;
    height: 72px;
    box-shadow: 0 0 40px 0 rgb(206, 206, 206);
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
}

#top-banner a {
    display: inline-block;
    margin-left:40px;
    margin-top: 18px;
}

#top-banner button{
    display: inline-block;
    margin-right: 80px;
    margin-top: 20px;
    width: 90px;
    height: 36px;
    font-size: 14px;
}


.rates {
    background-color: #F2ECE2;
    width: 100vw;
    height: 520px;
    margin: 0 auto;
}

.rates-container {
    background-color:#F2ECE2;
    display: flex;
    justify-content: center;
    height: 520px; 
    max-width: 1530px;
    padding-left: 60px;
    padding-right: 80px;
    margin: 0 auto;
}

.msg-container {
    display:block;
    padding-top: 96px;
    padding-left: 5px;  
    width: 42%;
    min-width: 395px;
}

.msg-container p {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 40px;
    line-height: 22px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.msg-container h1 {
    font-weight: 700;
    font-size: 42px;
    margin-bottom: 28px;
    letter-spacing: 0.01em;
}


.city {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 44px;
}

.amount {
    color: #e41e57;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 38px; 
}

.msg-container a {
    color: black;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
}

.rates-buffer {
    display: block;
    background-color:#F2ECE2;
    width: 120px;
    max-width: 200px;
    min-width: 71px;
    height: 520px;
}

.form-container {
    display: block;
    box-shadow: 0 0 20px rgb(206, 206, 206);
    width: 545px;
    height: 432px;
    background-color: #fff;
    border-radius: 15px;
    margin-top: 0;
    margin-bottom: 95px;
}

.form-message {
    color: #222222;
    font-size: 18px;
    line-height: 24px;
    padding: 0px 8px 12px 8px;
    margin: 26px 30px 16px 30px;
}

#address-input {
    width: 480px;
    height: 57px;
    margin-left: 34px;
    margin-right: 32px;
    padding-left: 10px;
    border-radius: 8px 8px 0px 0px;
    border-color: rgb(176,176,176);
    border-width: 1px;
    z-index: 0;
}


#rt-down-arrow, #gc-down-arrow {
    padding-right: 18px;
    padding-top: 10px;
    color: #000000;
}

#rt-down-arrow:hover, #gc-down-arrow:hover {
    cursor: pointer;
}

.dropdown-txt {
    padding-top: 16px;
}

#room-type-dropdown { 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    border-style: solid;
    border-color: rgb(176,176,176);
    border-top: none;
    border-width: 1px;
    width: 480px;
    height:57px;
    padding-left: 10px;
    margin-bottom: 0;
    margin-left: 34px;
    margin-right: 32px;
}

#guest-count-dropdown {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 480px;
    height: 57px;
    margin-left: 34px;
    margin-right: 32px;
    padding-left: 10px;
    border:solid;
    border-top: none;
    border-radius: 0px 0px 8px 8px;
    border-color: rgb(176,176,176);
    border-width: 1px;
    z-index: 0;
}

.special-space a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    line-height: 66px;
    font-size: 14px;
    margin-left: 34px;
}

.special-space span{
    font-size: 20px;
}

.btn-listing{
    width: 480px;
    height: 57px;
    background-color:black;
    color: white;
    border-radius: 8px;
    margin-left: 34px;
}

$(function(){
    var topBanner = $('#top-banner');
    $(window).scroll(function(){
        if($(this).scrollTop() > 600) {
            topBanner.addClass('fixed');
        }
        else {
            topBanner.removeClass('fixed');
        }
    })
});

Comments

[mattari_panda]

可能でしたら全体のHTML+CSSも提示してもらえると、アドバイスしやすくなります。
外に出してはまずいテキストなどはダミーのものに差し替えたりしてください。

現状のHTML+CSSではおそらくこうだろうという不正確な回答しかできないです。

[MsParrot]

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

Answer 1

こんにちは。

詳細度の問題でしょう。

#top-banner {
    display: none; /* 詳細度100でこれが勝つ */
}

.fixed {
    display: flex; /* 詳細度010でこれは負け */
}

参考：

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

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

---

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

Comments

[MsParrot]

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

Answer 2

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

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

コードはこちらです。

    <div class="top-logo">
      <a href="#">
      <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>
      </a>
    </div>
    
   <div id="top-banner">
      <a href="#">
        <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>
        </a>
      <button type="button" class="btn btn-danger">はじめる</button>
    </div>

*{
    margin: 0;
    padding: 0;
    font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
}

.top-logo {
    position: top;
    background-color:#F2ECE2;
    padding: 24px 0px 0px 24px;
    width: 100vw;
    margin: 0 auto;
}

#top-banner { 
    background-color: white;
    width: 100vw;
    height: 72px;
    box-shadow: 0 0 40px 0 rgb(206, 206, 206);
    position: fixed;
    top: 0;
    right: 0;
    display: none;
    justify-content: space-between;
}

$(function(){
    $(window).scroll(function(){
      if($(this).scrollTop() >= 600) {
        $('#top-banner').css('display', 'flex');
      }
      else if($(this).scrollTop() < 600) {
        $('#top-banner').css('display', 'none');
        }
     })
  });