向下滚动时切换徽标

时间:2015-10-30 17:18:45

标签: javascript jquery html css

我有点坚持这样做,所以我需要你的帮助:)。

我目前正在Shopify中开展一个项目

以下是我网站上的问题:

  1. 向下滚动一下,导航菜单将显示其带有白色背景的传统徽标[黑色]。现在打开商店按钮然后向上滚动,导航的白色背景应与遗产徽标[黑色]以及搜索图标[黑色]

  2. 一起保留
  3. 向下滚动一下,导航菜单将显示其带有白色背景的传统徽标[黑色]。现在打开商店按钮然后关闭它,遗产标志[黑色]应保留白色背景加上搜索图标[黑色]

  4. 您可以看到确切的输出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;
    &#13;
    &#13;

0 个答案:

没有答案