javascript - logo will change when scroll down -
i'm kinda stuck doing this, need :)
i working on project in shopify
and here problem on site:
scroll down bit, navigation menu appear heritage logo [black] white background. open shop button scroll up, white background of navigation should remain along heritage logo [black] plus search icon [black]
scroll down bit, navigation menu appear heritage logo [black] white background. open shop button close it, heritage logo [black] should remain white background plus search icon [black]
you can test work here jsbin
or if want see live website:
click here , password is: chough
please let me know further information needed, understand 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"> {% 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"> {% 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"> {% 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"> {% 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 -->
why not trying adding condition sticky-target-menu , comment scroll functions out. when bar open @ top, show black logo. 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'); } 
Comments
Post a Comment