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 you can do it 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 rather with a div and the background image with css