페이지 위로 스크롤 할 때 및 메뉴를 열 때 이미지 바꾸기

Question

나는 그들의 웹 사이트에 정말로 멋진 CodyHouse 팝 아웃 메뉴를 발견했습니다. 내가 총의 jQuery newb으로 직면하고있는 문제는

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:+448451390151">0845 139 0151</a></li> 
      <li><a href="mailto:hello@wunderful.co.uk">hello@wunderful.co.uk</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

여기, 모의있는 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

을 그래서 이것은 모든 당신이 가지고 당신의 HTML에 대한 대답

 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; 

    });