logo will change when scroll down

Question

I'm kinda stuck doing this, so I need your help :)

I am currently working on a project in Shopify

and here are the problem on my site:

1. Scroll down a bit, the navigation Menu will appear with its heritage logo [black] with white background. Now open the shop button then scroll it up, the white background of the navigation should remain along with the heritage logo [black] plus the search icon [black]

2. Scroll down a bit, the navigation Menu will appear with its heritage logo [black] with white background. now open the shop button then close it, the heritage logo [black] should remain with the white background plus the search icon [black]

You can test my work here JSbin

or if you want to see the live website:

click here and the password is: chough

Please let me know what further information needed, to understand it better.

Thanks in Advance :)

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

Why not trying adding a condition for the sticky-target-menu and comment your scroll functions out. Even when the bar is open at the top, to show the black logo. You don't have problems when it's closed down.

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

}