向下滚动时徽标将发生变化
logo will change when scroll down
我有点困了，所以我需要你的帮助：）
我目前正在Shopify 的一个项目中工作
这是我的网站上的问题：
-
向下滚动一点，导航菜单将显示其白色背景的传统标志[黑色]。现在打开商店按钮，然后向上滚动，导航的白色背景应该与传统标志[黑色]加上搜索图标[黑色]一起保留
-
向下滚动一点，导航菜单将显示其白色背景的传统标志[黑色]。现在打开商店按钮，然后关闭它，遗产标志[黑色]应该保持白色背景加上搜索图标[黑色]
你可以在这里测试我的工作JSbin
或者如果你想看直播网站：
点击这里，密码是：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 -->为什么不尝试为粘性目标菜单添加一个条件，并注释您的滚动功能。即使酒吧的顶部是开放的，也要显示黑色的标志。当它关闭时，你不会有问题。
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');
}
相关文章：
- Bootstrap Navbar滚动后品牌发生变化
- 如何制作随滚动而变化的垂直滑块
- CSS.滚动后元素位置发生变化
- 滚动时背景图像发生变化
- 动画粘性标题，随滚动变化
- jQuery:滚动时平滑动画字体大小变化
- jQuery:滚动时平滑宽度变化
- CSS 在滚动时会发生变化，但会随着滚动速度而变化
- 身高随着我向下滚动而变化
- 使微小的滚动条与不断变化的动画内容一起工作
- amCharts显示滚动气球中的值变化
- 向下滚动时徽标将发生变化
- 菜单上滚动的活动类-如何添加字体颜色和字体大小变化的活动类
- jQuery Snap/Fixed菜单宽度的变化和跳跃，当滚动超过一定的点
- 在滚动时创建一个变化的css导航条
- 随着屏幕分辨率的变化，网页上的水平滚动条外观
- 如何检测iOS7 Safari滚动时的高度变化- JavaScript
- Jquery滚动到元素，然后锁定该元素，而不管窗口大小的变化
- 如何做滚动效果的焦点在页面元素的变化
- 如何创建在向下滚动页面时发生变化的页眉
