Add Jquery To Css Class

how I can link jQuery to specific CSS class to assign to one block

here my code i need to add

jQuery

$(document).ready(function() {
$(window).on("scroll", function() {
if ($(window).scrollTop() >= 20) {
$(".navbar").addClass("compressed");
} else {
$(".navbar").removeClass("compressed");
}
});
});
CSS
.navbar {
visibility: hidden;
}
.navbar.compressed {
visibility: visible;
}

For example, use HTML block with SMARTY support to add js code


CSS can be added to the CSS section of the Theme editor