On scroll change Header background

//----- Script --------//
jQuery(function($){
  $(window).scroll(function() {
      if ($(document).scrollTop() > 50) {
        $('#section-padding').addClass('reduce-section-padding');
        $('#row-width').addClass('increase-row-width');
        $('#my-site-logo').addClass('reduce-logo');
    } else {
       $('#section-padding').removeClass('reduce-section-padding');
       $('#section-padding').addClass('slow-transition');
       $('#row-width').removeClass('increase-row-width');
       $('#row-width').addClass('slow-transition');
       $('#my-site-logo').removeClass('reduce-logo');
       $('#my-site-logo').addClass('slow-transition');
    }
  });
});
//----- Script --------//

//----- Style--------//
.reduce-section-padding {
transition: all 0.9s ease-out 0s;
padding-top: 0px !important;
padding-bottom: 0.5vw !important;
}
.reduce-logo{
transition: all 0.9s ease-out 0s;
transform: scale(0.8) !important; /* Standard syntax */
/*content: url(/wp-content/uploads/2020/05/favicon.png) !important;*/
}
 
.increase-row-width {
transition: all 0.9s ease-out 0s;
width: 98% !important;
}
 
.slow-transition {
transition: all 0.9s ease-out 0s;
}
 
#main-content {
margin-top: 5vw;
}

//----- Style--------//