我有点坚持这样做,所以我需要你的帮助:)。
我目前正在Shopify中开展一个项目
以下是我网站上的问题:
向下滚动一下,导航菜单将显示其带有白色背景的传统徽标[黑色]。现在打开商店按钮然后向上滚动,导航的白色背景应与遗产徽标[黑色]以及搜索图标[黑色]
向下滚动一下,导航菜单将显示其带有白色背景的传统徽标[黑色]。现在打开商店按钮然后关闭它,遗产标志[黑色]应保留白色背景加上搜索图标[黑色]
您可以看到确切的输出HERE
或者如果您想查看直播网站:
click 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');
}
});
});
&#13;
<section id="nav" class="livery-margin-none sticky-target-menu">
{{ '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="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 class="livery-logo menu-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>
{% 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>
&#13;