当向上滚动页面和打开菜单时替换图像

Question

我在他们的网站上发现了一个非常漂亮的CodyHouse弹出式菜单。我面临的，作为一个整体的jQuery福利局的问题是，我似乎无法弄清楚如何更换我的标志，当...

1. 用户使用的向上滚动
2. 菜单被打开汉堡菜单

这里是CodyHouse提供和我目前使用的代码...

jQuery(document).ready(function($){ 
//if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don't forget to update this value as well 
var MQL = 1170; 

//primary navigation slide-in effect 
if($(window).width() > MQL) { 
    var headerHeight = $('.cd-header').height(); 
    $(window).on('scroll', 
    { 
     previousTop: 0 
    }, 
    function() { 
     var currentTop = $(window).scrollTop(); 
     //check if user is scrolling up 
     if (currentTop < this.previousTop) { 
      //if scrolling up... 
      if (currentTop > 0 && $('.cd-header').hasClass('is-fixed')) { 
       $('.cd-header').addClass('is-visible'); 
      } else { 
       $('.cd-header').removeClass('is-visible is-fixed'); 
      } 
     } else { 
      //if scrolling down... 
      $('.cd-header').removeClass('is-visible'); 
      if(currentTop > headerHeight && !$('.cd-header').hasClass('is-fixed')) $('.cd-header').addClass('is-fixed'); 
     } 
     this.previousTop = currentTop; 
    }); 
} 

//open/close primary navigation 
$('.cd-primary-nav-trigger').on('click', function(){ 
    $('.cd-menu-icon').toggleClass('is-clicked'); 
    $('.cd-header').toggleClass('menu-is-open'); 

    //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden 
    if($('.cd-primary-nav').hasClass('is-visible')) { 
     $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ 
      $('body').removeClass('overflow-hidden'); 
     }); 
    } else { 
     $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ 
      $('body').addClass('overflow-hidden'); 
     }); 
    } 
}); }); 

的HTML是...

<div class="cd-header"> 
    <div class="cd-logo"><a href="<?php echo get_site_url(); ?>"><img src="/wp-content/uploads/2017/09/Wunderful_Designs_Logo-_-Print_300dpi-_-Royal_Blue_Version.svg" width="250" height="auto"/></a></div> 

    <nav> 
     <ul class="cd-secondary-nav"> 
      <li><a href="tel:[phone]">0845 139 0151</a></li> 
      <li><a href="mailto:[email protected]">[email protected]</a></li> 
     </ul> 
    </nav> <!-- cd-nav --> 


    <a class="cd-primary-nav-trigger" href="#0"> 
     <span class="cd-menu-text">Menu</span><span class="cd-menu-icon"></span> 
    </a> <!-- cd-primary-nav-trigger --> 
</div> 

<nav> 
    <ul class="cd-primary-nav"> 
     <li class="cd-label">About us</li> 

     <li><a href="#0">The team</a></li> 
     <li><a href="#0">Our services</a></li> 
     <li><a href="#0">Our projects</a></li> 

     <li class="cd-label">Work with us</li> 

     <li><a href="#0">Start a project</a></li> 
     <li><a href="#0">Join In</a></li> 
     <li><a href="#0">Create an account</a></li> 

     <li class="cd-label">Follow us</li> 

     <li class="cd-social cd-facebook"><a href="#0">Facebook</a></li> 
     <li class="cd-social cd-instagram"><a href="#0">Instagram</a></li> 
     <li class="cd-social cd-dribbble"><a href="#0">Dribbble</a></li> 
     <li class="cd-social cd-twitter"><a href="#0">Twitter</a></li> 
    </ul> 
</nav> 
<header> 
    <div class="block"> 
     <div class="two-column"> 
      <div class="column home-intro"> 
       <div class="block">   
        <h1>This is Wunderful</h1> 
        <p>My web studio delivers minimalist yet enticing websites that focus on user experience and converting sales.</p> 
        <p>I also support website owners post launch, revising tactics and improving results.</p> 
        <p class="signoff">- Oliver Martin</p> 
        <a href="#"><button class="two-tone">LET'S TALK! <img src="/wp-content/uploads/2017/09/wave.svg" width="30px" height="auto" /></button></a> 
        <p style="margin-left: 15px;"><img src="/wp-content/themes/wunderful/assets/images/rounded-arrow.svg" width="25px" height="auto"> <small><a href="#">VIEW MY PROJECTS</a></small></p> 
       </div> 
      </div> 
      <div class="column"> 
       <img src="/wp-content/themes/wunderful/assets/images/project-presentation" alt="Lion Windows - Website Project" width="100%" height="auto"> 
      </div> 
     </div> 
    </div> 
</header> 

所以基本上我想在浏览器窗口向上滚动并且菜单按钮被触发时用我的徽标的白色版本替换.cd-logo img的src。当用户向下滚动并关闭菜单时，我需要图像返回到蓝色版本。

请帮忙，因为我无法弄清楚这一点。我试过了好几个小时，现在:(

奥利弗

Answer 1

为HTML代码小样，这里是什么jQuery代码会是什么样子，你必须所以是改变我的src属性中的文本要切换到图片的链接。

var iScrollPos = 0; 
jQuery(window).scroll(function() { 
    var iCurScrollPos = jQuery(this).scrollTop(); 
    if (iCurScrollPos > iScrollPos) { 
     //Scrolling Down 
     jQuery('.cd-logo img').attr('src' , ' YOUR IMG URL TO CHANGE TO WHEN SCROLLING DOWN '); 

    }else { 

     //Scrolling Up 
     jQuery('.cd-logo img').attr('src' , ' YOUR IMG URL TO CHANGE TO WHEN SCROLLING DOWN '); 
    } 

    iScrollPos = iCurScrollPos; 

}); 

Answer 2

所以这就是答案

 var iScrollPos = 0; 
    jQuery(window).scroll(function() { 
     var iCurScrollPos = jQuery(this).scrollTop(); 
     if (iCurScrollPos > iScrollPos) { 
      //Scrolling Down 
      jQuery('#masthead.active .custom-logo-link img').attr('src' , 'http://127.0.0.1/wordpress/wp-content/uploads/2017/09/mymain_logo.png'); 

     }else { 

      //Scrolling Up 
      jQuery('#masthead.active .custom-logo-link img').attr('src' , 'http://127.0.0.1/wordpress/wp-content/uploads/2017/09/mywhite_logo.png'); 
     } 

     iScrollPos = iCurScrollPos; 

    });