javascript - 向下滚动时 Logo 会改变

Question

我有点陷入困境，所以我需要你的帮助:)

我目前正在 Shopify 中开展一个元素

这是我网站上的问题:

1. 向下滚动一点，导航菜单将出现，并带有白色背景的传统 Logo [黑色]。现在打开商店按钮然后向上滚动，导航的白色背景应与传统 Logo [黑色]和搜索图标[黑色]一起保留

2. 向下滚动一点，导航菜单将出现，并带有白色背景的传统 Logo [黑色]。现在打开商店按钮然后关闭它，传统 Logo [黑色]应保留在白色背景加上搜索图标[黑色]

您可以在这里测试我的工作 JSbin

或者如果您想查看实时网站:

点击here密码是:chough

请让我知道需要哪些进一步的信息，以便更好地理解。

提前致谢:)

JAVASCRIPT 和 HTML

$(document).ready(function(){
  
  //jQuery.scrollSpeed(50, 800);
 
  $('#shop-menu-dropdown').on('click', function (e) {
  
    if($('.livery-collection-menu-container').hasClass('hide')) {
      
      $('.sticky-target-menu').addClass('collection-menu-open').css('transition', 'all 0.5s ease-in-out');
      $('.livery-collection-menu-container').slideDown().removeClass('hide');
      $('#logo-img img')
              .css( {'height': '55px', 'position': 'relative', 'top': '10px',} )
              .attr('src','https://cdn.shopify.com/s/files/1/0893/1740/t/2/assets/logoblack2.png?16348450756183240677');
      $('.livery-search-button')
              .attr('src','http://cdn.shopify.com/s/files/1/0893/1740/t/2/assets/icon-search.png?2506340321008419925');
      
    } else {
      
      $('.sticky-target-menu').removeClass('collection-menu-open').css('transition', 'all 0.5s ease-in-out');
      $('.livery-collection-menu-container').slideUp().addClass('hide');
      $('#logo-img img')
      		  .css( {'height': '70px', 'position': 'relative', 'top': '10px',} )
              .attr('src','https://cdn.shopify.com/s/files/1/0893/1740/t/2/assets/logo.png?15237508448918884431');
      $('.livery-search-button')
              .attr('src','http://cdn.shopify.com/s/files/1/0893/1740/t/2/assets/icon-search-light.png?16581710301453831089');
    }
    e.preventDefault();
    
  });
      $(window).scroll(function(){
        if($(this).scrollTop() > 1) {
          // $('#logo-img img').fadeOut('slow');
          $('#logo-img img')
              .css( {'height': '55px', 'position': 'relative', 'top': '10px',} )
              .attr('src','https://cdn.shopify.com/s/files/1/0893/1740/t/2/assets/logoblack2.png?16348450756183240677');
          $('.livery-search-button')
              .attr('src','http://cdn.shopify.com/s/files/1/0893/1740/t/2/assets/icon-search.png?2506340321008419925');
          
        }
        if($(this).scrollTop() < 1) {
          // $('#logo-img img').fadeIn('fast');
          $('#logo-img img')
              .css( {'height': '70px', 'position': 'relative', 'top': '10px',} )
              .attr('src','https://cdn.shopify.com/s/files/1/0893/1740/t/2/assets/logo.png?15237508448918884431');
          $('.livery-search-button')
              .attr('src','http://cdn.shopify.com/s/files/1/0893/1740/t/2/assets/icon-search-light.png?16581710301453831089');
        }
        if($(this).scrollTop() > 1) {
          // $('#logo-img img').fadeOut('slow');
          $('#logo-img2 img')
              
              .attr('src','https://cdn.shopify.com/s/files/1/0893/1740/t/2/assets/good_company_logo.png?15237508448918884431');
        }
        if($(this).scrollTop() < 1) {
          // $('#logo-img img').fadeIn('fast');
          $('#logo-img2 img')
              
              .attr('src','https://cdn.shopify.com/s/files/1/0893/1740/t/2/assets/goodcompanylogo.png?15237508448918884431');
        }
    });
});

<!-- Begin navigation -->      
        <section id="nav" class="livery-margin-none sticky-target-menu">
          
          
          
          
          
          {% if template contains 'product' or template contains 'page' or template contains 'search' or template contains 'cart' or template contains 'checkouts'%}
          <!--tumblr-blog-nav-->
          <div class="col-md-12 nopadding-nomargin hidden-sm hidden-xs">
            <nav class="fl livery-menu">
              {% include 'dropdown-tumblr' %}
            </nav> 
          </div>
          
          <div class="container-fluid nopadding-nomargin visible-sm visible-xs" id="cus-mob-bg">
            <div class="col-md-12 nopadding-nomargin">
              
              <div class="container">
              <div class="mobile-menu">
                
                  <div class="livery-logo text-center">
                     {% if settings.use_logo %}
                     <a href="/"><img src="{{ 'logoblack.png' | asset_url }}" alt="{{ shop.name }}" id="logo_center" /></a>
                     {% else %}
                     <a href="/">{{ shop.name }}</a>
                     {% endif %}
                  </div>
                
                  <div class="mobile-menu-button">
                    <div class="mobile-currency-switcher hidden-xs hidden-sm">
                    <a href="#"><span class="money currency-switcher">${{amount}} CAD</span></a>
                  	{% include 'custom-currency-picker' %}
                
                  	</div>
                    <a href="javascript:void(0);" class="responsive-button"><i class="fa fa-bars"></i></a>
                  </div>
                
                     <div id="cus-cart-target" class="toolbar-cart {% if cart.item_count != 0 %}has-items{% endif %}">
                       <a href="/cart" class="cart" title="Shopping Cart">
                         <i class="fa fa-shopping-cart livery-icon-small"></i>
                       </a>
                     </div>
                       
                {% include 'mobile-menu' %}           

				</div>   
              </div>
            </div>
          </div>
          
          <div class="col-md-12 nopadding-nomargin hide livery-collection-menu-container">
            <nav class="fl livery-collection-menu" style="background:{{settings.livery_sub_menu_color}};">
            	<ul class="horizontal unstyled clearfix">
                  {% for link in linklists.collection-menu.links %}
                  {% if linklists[link.handle] == empty %}
                  <li>
                    <a href="{{ link.url }}" class="{% if link.active %} current{% endif %}">
                      <span>{{ link.title }}</span></a>
                  </li>
                  {% else %}
                  <li class="dropdown"><a href="{{ link.url }}" class="{% if link.active %} current{% endif %}">
                    <span>{{ link.title }}</span></a>
                    <ul class="dropdown">
                      {% for l in linklists[link.handle].links %}
                      <li><a href="{{ l.url }}"{% if l.active %} class="current"{% endif %}>{{ l.title }}</a></li>
                      {% endfor %}
                    </ul>
                  </li>
                  {% endif %}
                  {% endfor %}
              	</ul>
            </nav>
          </div>
            
         <!--end-tumblr-blog-nav-->
          
          
          {% elsif blog.title == 'Good Company' %}
          {{ 'changelogo.js' | asset_url | script_tag }}
          <div class="col-md-12 nopadding-nomargin hidden-sm hidden-xs">
            <nav class="fl livery-menu">
              {% include 'dropdown-blog' %}
            </nav> 
          </div>
          
          <div class="container-fluid nopadding-nomargin visible-sm visible-xs" id="cus-mob-bg">
            <div class="col-md-12 nopadding-nomargin">
              
              <div class="container">
              <div class="mobile-menu">
                
                  
                
                  <div class="livery-logo text-center">
                     {% if settings.use_logo %}
                     <a href="/"><img src="{{ 'logoblack.png' | asset_url }}" alt="{{ shop.name }}" /></a>
                     {% else %}
                     <a href="/">{{ shop.name }}</a>
                     {% endif %}
                  </div>
                
                  

                  <div class="mobile-menu-button">
                    <div class="mobile-currency-switcher hidden-xs hidden-sm">
                    <a href="#"><span class="money currency-switcher">${{amount}} CAD</span></a>
                  	{% include 'custom-currency-picker' %}
                
                  	</div>
                    <a href="javascript:void(0);" class="responsive-button"><i class="fa fa-bars"></i></a>
                  </div>
                
                 
                {% include 'mobile-menu-blog' %}
                
           	  </div>   
              </div>
            </div>
          </div>
          
          {% else %}
          
          <!--index-nav-->
          {{ 'changelogo.js' | asset_url | script_tag }}
          
          <div class="col-md-12 nopadding-nomargin hidden-sm hidden-xs">
            <nav class="fl livery-menu">
              {% include 'dropdown' %}
            </nav> <!-- /.main -->
          </div>
          
          <div class="container-fluid nopadding-nomargin visible-sm visible-xs" id="cus-mob-bg">
            <div class="col-md-12 nopadding-nomargin">
              
              <div class="container">
              <div class="mobile-menu">
                  <div class="livery-logo text-center">
                     {% if settings.use_logo %}
                     <a href="/"><img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" class="hidden-xs hidden-sm"/></a>
                     <a href="/"><img src="{{ 'logoblack.png' | asset_url }}" alt="{{ shop.name }}" id="logo_center" class="visible-xs visible-sm"/></a>
                     {% else %}
                     <a href="/">{{ shop.name }}</a>
                     {% endif %}
                  </div>
                
                  <div class="mobile-menu-button">
                    <div class="mobile-currency-switcher hidden-xs hidden-sm">
                    <a href="#"><span class="money currency-switcher">${{amount}} CAD</span></a>
                  	{% include 'custom-currency-picker' %}
                  	</div>
                    <a href="javascript:void(0);" class="responsive-button"><i class="fa fa-bars"></i></a>
                  </div>
                
                  <div id="cus-cart-target" class="toolbar-cart {% if cart.item_count != 0 %}has-items{% endif %}">
                    <a href="/cart" class="cart" title="Shopping Cart">
                      <i class="fa fa-shopping-cart livery-icon-small"></i>
                    </a>
                  </div>
           

                
                  {% include 'mobile-menu' %}
              </div>   
              </div>
            </div>
          </div>
          
          <div class="col-md-12 nopadding-nomargin hide livery-collection-menu-container">
            <nav class="fl livery-collection-menu" style="background:{{settings.livery_sub_menu_color}};">
            	<ul class="horizontal unstyled clearfix">
                  {% for link in linklists.collection-menu.links %}
                  {% if linklists[link.handle] == empty %}
                  <li>
                    <a href="{{ link.url }}" class="{% if link.active %} current{% endif %}">
                      <span>{{ link.title }}</span></a>
                  </li>
                  {% else %}
                  <li class="dropdown"><a href="{{ link.url }}" class="{% if link.active %} current{% endif %}">
                    <span>{{ link.title }}</span></a>
                    <ul class="dropdown">
                      {% for l in linklists[link.handle].links %}
                      <li><a href="{{ l.url }}"{% if l.active %} class="current"{% endif %}>{{ l.title }}</a></li>
                      {% endfor %}
                    </ul>
                  </li>
                  {% endif %}
                  {% endfor %}
              	</ul>
            </nav>
          </div>   
          {% endif %}
        </section>
      <!-- End navigation -->

Answer 1

为什么不尝试为粘性目标菜单添加一个条件并注释掉您的滚动功能。即使顶部的栏打开，也能显示黑色标志。当它关闭时，您不会遇到任何问题。

if ($('.sticky-target-menu').hasClass('collection-menu-open')){
    $('#logo-img img')
    .css( {'height': '55px', 'position': 'relative', 'top': '10px',} )
    .attr('src','https://cdn.shopify.com/s/files/1/0893/1740/t/2/assets/logoblack2.png?16348450756183240677');
      $('.livery-search-button')
              .attr('src','http://cdn.shopify.com/s/files/1/0893/1740/t/2/assets/icon-search.png?2506340321008419925');

}