How to animate class change?

Question

JavaScript

Ku Ku.
I installed a simple navbar stick that changes when you scroll. Here is his code:

$(function(){
var $window = $(window);
var $mainNav = $("#header");

$window.scroll(function() {
if ($window.scrollTop() >= 1) {
$mainNav.addClass("is-scrolling");
}
else {
$mainNav.removeClass("is-scrolling");
}
});
});

It is possible in another way:

jQuery(window).scroll(function(){
    "use strict";
    var b = jQuery(window).scrollTop();
    if( b > 60 ){
        jQuery("#header").addClass("is-scrolling");
    } else {
        jQuery("#header").removeClass("is-scrolling");
    }
});

This simplicity works great, but abruptly. I want to animate this process, but my pads are compressed and I can’t catch up on how to do it with a third-party method, for example, through easing.js (do they do that at all? oO)
In general, guys, tell me how to animate this, any method that comes to mind Come write, I need to catch the current principle. Thank you all in advance, don't swear at me)

Answer 1

.header-style1 {
    transition-duration: .3s;
    transition-property: background-color, padding-top, padding-bottom;
    transition-timing-function: ease-in-out;
}

.header-style1.is-scrolling {
    background-color: #323a45;
    padding-top: 5px;
    padding-bottom: 5px;
}