標誌將改變時，向下滾動

我有點堅持這樣做，所以我需要你的幫助:)標誌將改變時，向下滾動

我目前工作的一個項目在Shopify

，這裏是我的網站上的問題：

向下滾動一下，導航菜單將出現與其遺產標誌[黑色]與白色背景。現在打開商店按鈕，然後向上滾動，導航的白色背景應該與遺產標誌[黑色]一起加上搜索圖標[黑色]
向下滾動一下，導航菜單將隨其顯示遺產標誌[黑色]有白色背景。現在開的店按鈕，然後關閉它，遺產標誌[黑色]應保持與白色背景加上搜索圖標[黑色]

您可以測試在這裏我的工作JSbin

，或者如果你想看直播的網站：

點擊here，密碼爲：紅嘴山鴉

請讓我知道需要什麼進一步的信息，更好地理解它。

感謝提前:)

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?08419925'); 
 
     
 
    } 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') 
 
     \t \t .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?08419925'); 
 
      
 
     } 
 
     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> 
 
        \t {% include 'custom-currency-picker' %} 
 
       
 
        \t </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' %}   
 

 
\t \t \t \t </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}};"> 
 
      \t <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 %} 
 
       \t </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> 
 
        \t {% include 'custom-currency-picker' %} 
 
       
 
        \t </div> 
 
        <a href="javascript:void(0);" class="responsive-button"><i class="fa fa-bars"></i></a> 
 
        </div> 
 
       
 
        
 
       {% include 'mobile-menu-blog' %} 
 
       
 
      \t </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> 
 
        \t {% include 'custom-currency-picker' %} 
 
        \t </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}};"> 
 
      \t <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 %} 
 
       \t </ul> 
 
      </nav> 
 
      </div> 
 
      {% endif %} 
 
     </section> 
 
     <!-- End navigation -->

來源

2015-10-31 AJ Abaricia

爲什麼不嘗試增加對粘性目標菜單的條件，並進行評論您的滾動功能。即使酒吧在頂部打開，顯示黑色標誌。關閉時你沒有問題。

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?08419925'); 

}

來源

2015-10-31 16:42:52 StvnSpnz

好的，謝謝。我在這裏只有兩天作爲會員，但我認爲這是一個很好的練習，不會在編程技巧上生鏽。 – StvnSpnz

這不工作兄弟:) –

標誌將改變時，向下滾動

回答

相關問題