Website header animation not smooth and only occurs in the first scroll

Question

I am trying to create a smooth animation for my header navigation on my website (www.loveyoga.co) so that it shrinks in height and the logo shrinks in overall size. I've followed instructions such as those on this site however the animation is not smooth and only occurs if you scroll down a tiny bit, if you scroll down a lot then the animation does not happen at all. The header navigation does successfully change in size so I know that side of it works, it's just the animation that doesn't.

I am using CSS to make the size changes and for the transitions and I'm using javascript to add a .sticky class to the various classes that need changing once you scroll down.

This is the javascript:

  // Sticky Menu
$(window).on('scroll', function () {
    if ($(window).scrollTop() > 1) {
        $('.sticky-menu').addClass('sticky');
        $('.site-logo').addClass('sticky');
        $('.nav-menu').addClass('sticky');
        $('.site-header').addClass('sticky');
    } else {
        $('.sticky-menu').removeClass('sticky');
        $('.site-logo').removeClass('sticky');
        $('.nav-menu').removeClass('sticky');
        $('.site-header').removeClass('sticky');
    }

    if ($(window).scrollTop() > 750) {
        $('.sticky-menu').addClass('sticky-scrolled')
    } else {
        $('.sticky-menu').removeClass('sticky-scrolled')
    }
});

This is the css updates (in my Wordpress child theme style.css):

    .header.sticky {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 999999;
  height:40px;
  line-height: 40px;
}

.header {
  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  -ms-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
}

.site-logo{
  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  -ms-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
}

.nav-menu{
  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  -ms-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
  }

.site-logo.sticky {
max-width: 130px;
height: 40px;
line-height: 40px;
}

.nav-menu.sticky li a {
height: 40px;
line-height: 40px;
font-size: 12px;
}

.site-header.sticky {
height: 40px;
line-height: 40px;
}

.site-header{
  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  -ms-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;

I would be very grateful if anyone could take a look at my site and see if something comes to mind.

Many thanks in advance!