Animate header logo on scroll

<div class="header">
  <a href="https://dplugins.com/">
    <img class="brand" src="https://dplugins.com/wp-content/uploads/2021/06/dPlugins-logo.svg" alt="">
  </a>
</div>

Important here is that you add class .header to your header and class .brand to your logo.

$(function () {
  var header = $(".header");
  $(window).scroll(function () {
    var scroll = $(window).scrollTop();

    if (scroll >= 1) {
      header.addClass("header-alt");
    } else {
      header.removeClass("header-alt");
    }
  });
});

Code will add new class (.header-alt) to the header to the .header after user scrolls more then 1px. On the line 6 you can change scroll value to what you prefer (50px, 100px, etc).

.brand {
  min-width: 80vw;
  max-height: 400px;
  transition: all ease-in 0.5s;
}

.header-alt .brand{
   max-height: 50px;
   transition: all ease-in 0.5s;
}

Add height to your logo before and after scroll. I set it up to 400px and 50px but you can play with values. Also add transition so that you get animation effect.

Codepen Preview