如何添加 Javascript 以更改 header 在 Shopify （區主題）中滾動時的文本顏色

Question

所以我有這個js代碼，但它沒有被應用。 我希望將滾動 class 添加到.logo-nav-contain，但是當我滾動時沒有任何反應。 如果我將紅色背景應用於 .logo-nav-contain class 它會改變，所以我知道樣式塊是正確的。 我認為這可能與 Shopify 和 JS 有關。 有人在這里看到錯誤嗎？

<script type="text/javascript"> 


$(function() {
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 1) {
            $(".logo-nav-contain").addClass("on-scroll");
        } else {
         $(".logo-nav-contain").removeClass("on-scroll");
        }
    });
});
  
</script>

<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=397982167525776&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->


<style>
  .on-scroll {
    background-color: red !important; 
  }
 
  
</style>


<div data-section-id="{{ section.id }}"  data-section-type="header-section" >
  <div class="site-header-wrapper">
    <header class="site-header {% if section.settings.minimal_padding == "minimal" %}minimal{% endif %} {% if section.settings.header_full_width %}full-width{% endif %}" data-scroll-lock="{{ section.settings.scroll_lock }}" role="banner">
      <div class="wrapper" style="position: fixed; z-index: 1000; width: 100%; padding-right: 40px">
        <div class="logo-nav-contain layout-{{ section.settings.header_layout }}">
          {% comment %}
            Use the uploaded logo from theme settings if enabled.
            Site name gets precedence with H1 tag on homepage, div on other pages.
          {% endcomment %}
          
          
          {% comment %}
           mobile menu below 
          {% endcomment %}
          <header class="util">
              <div class="wrapper">

                  <div class="left-wrapper">
                    <ul class="text-links">
                      <li class="mobile-menu">
                        <a href="#menu" class="toggle-menu menu-link">
                          <span class="icon-text">
                            <span class="icon icon-menu" aria-hidden="true">{% include 'icon-ui-menu' %}</span>
                            <span class="text" data-close-text="{{ 'layout.drawers.close_menu' | t }}">{{ 'layout.navigation.menu' | t }}</span>
                          </span>
                        </a>
                      </li>
                    </ul>
                </div>
            </div>
          </header> 
            
          
          <div class="logo-contain">
            {% if template.name == 'index' %}
              <h1 class="site-logo {% if section.settings.logo %}has-image{% endif %}" itemscope itemtype="http://schema.org/Organization">
            {% else %}
              <div class="site-logo {% if section.settings.logo %}has-image{% endif %}" itemscope itemtype="http://schema.org/Organization">
            {% endif %}
              {% if section.settings.logo %}
                <a href="/" itemprop="url" class="logo-image">
                  {%- assign image = section.settings.logo -%}
                  {%- assign image_default_width = section.settings.logo_max_width -%}
                  {%- assign image_2x_width = image_default_width | times: 2 -%}
                  {%- assign image_3x_width = image_default_width | times: 3 -%}
                  {%- assign image_default = image_default_width | append: 'x' -%}
                  {%- capture widths -%}{{ image_default_width }},{{ image_2x_width }},{{ image_3x_width }}{%- endcapture -%}
                  {% assign image_widths = widths %}
                  {% include 'theme-rias' %}
                  <img id="{{ img_id }}" class="lazyload"
                    src="{{ image | img_url: image_default }}"
                    data-src="{{ image_url_pattern }}"
                    data-widths="[{{ image_widths }}]"
                    data-aspectratio="{{ image.aspect_ratio }}"
                    data-sizes="auto"
                    alt="{{ image.alt | escape | default: shop.name }}">
                </a>
              {% else %}
                <a href="/" itemprop="url">{{ shop.name }}</a>
              {% endif %}
            {% if template.name == 'index' %}
              </h1>
            {% else %}
              </div>
            {% endif %}
          </div>
          
         
          <nav class="nav-bar" role="navigation">
            {% include 'site-nav' %}
          </nav>
          <header class="util">
            <div class= "right-wrapper">
              {% if shop.customer_accounts_enabled %}
                {% include 'accounts-nav' %}
              {% endif %}

               <a href="/cart" id="CartButton">
                 <span class="icon-fallback-text"></span>
                    {{ 'layout.cart.title' | t }}
                 <span id="CartCount">({{ cart.item_count }})</span>
               </a>
               {% if settings.ajax_cart_enable %}
                {% include 'cart-preview' %}
               {% endif %}
          </div>

         </header>

          
      
        </div>

      </div>
    </header>
   </div>
</div>


<nav id="menu" class="panel" role="navigation">
 
  <div class="search">
    {% include 'search-bar' %}
  </div>
  
  {% include 'site-nav' %}

  <div class="account">
    {% if shop.customer_accounts_enabled %}
      {% include 'accounts-nav' %}
    {% endif %}
  </div>
</nav>

Answer 1

 let logo = document.querySelector('.logo-nav-contain'); window.addEventListener("scroll", (e) => { let scrolled = document.scrollingElement.scrollTop; if(scrolled > 1){ logo.classList.add( 'on-scroll'); }else { logo.classList.remove( 'on-scroll'); } });

 .logo-nav-contain { position: fixed; top: 0; left: 0; width: 100%; text-align: center; }.on-scroll { background: red; color: #fff; }

 <div class="logo-nav-contain">logo</div> <div style="height:1000px"></div>