Change img src when navbar-shrink is active

i'm using a bootstrap template where the navbar shrinks when scrolling down. I've made the navbar transparent until it scrolls, and it turns white simply by changing:

.navbar-default {
  background-color: transparent;
}
.navbar-default.navbar-shrink {
  background-color: #fff;
}

Now, my logo is mostly white because of the background-img but i want it to change to a black version when the navbar-shrink takes effect.

I tried to achieve it by changing the image src attr when the 'navbar-shrink' class is active with an if statement, but something must be wrong with it.

I've tried different ways and came up with this:

$(document).ready(function() {
if($('nav').hasClass('navbar-shrink')) ({
    $('.pull-left img').attr('src', 'img/dolphin-nav2.svg');
  });
});

or this

$(document).ready(function() {
if($('nav').attr('class', 'navbar-shrink')) ({
    $('.pull-left img').attr('src', 'img/dolphin-nav2.svg');
  });
});

but neither is working