Jquery img code to exchange

Question

I used the code of a guy that the menu is of one color when it is at the top and when the scroll of the page goes down, the menu turns black, but as soon as it turns black I want the img that in the case is the logo, change the src that is "logooficial.png" to "logooficial2.png" has how to help me if I know ? thank you =)

Answer 1

Pure jquery:

const window = $(window);
const logo = $('.logo');
window.scroll(function(){
   if( window.scrollTop < 100 )
      logo.attr('src', 'logooficial.png')
   else
      logo.attr('src', 'logooficial2.png')
});

Or Voce can also do with the help of css

<style>
   .logo {
      background: url('logooficial.png')
   }
   .logo.scrolled {
      background: url('logooficial2.png')
   }
</style>
<script>
   const window = $(window);
   const logo = $('.logo');
   window.scroll(function(){
      if( window.scrollTop < 100 )
         logo.removeClass('.scrolled')
      else
         logo.addClass('.scrolled')
   });
</script>

In this second case, the image should not be set with the tag but with a div and the background image with css