To add animation to hide the navigation menu?

Came across a code to hide the menu when you scroll down and display when scrolling up
$(document).ready(function() {

 var header = $(".header"); // Menu
 var scrollPrev = 0 // the Previous value of the scroll

 $(window).scroll(function() {
 var scrolled = $(window).scrollTop(); // scroll Height in px
 var firstScrollUp = false; // Parameter Skoll start up
 var firstScrollDown = false; // Setting the beginning of the Skoll down

 // If scroller
 if ( scrolled > 0 ) {
 // If the current value of the scroll > previous, i.e. scrollin down
 if ( scrolled > scrollPrev ) {
 firstScrollUp = false; // Reset the option start scrolling up
 // If the menu is visible
 if ( scrolled < header.height() + header.offset().top ) {
 // If started to scroll down
 if ( firstScrollDown === false ) {
 var topPosition = header.offset().top; // Record the current position menu
header.css({
 'top': topPosition + "px"
});
 firstScrollDown = true;
}
 // Position the menu absolutely
header.css({
 "position": "absolute"
});
 // If menu is NOT visible
 } else {
 // Fixed position menus off screen
header.css({
 "position": "fixed",
 "top": "-" + header.height() + "px"
});
}

 // If the current value of the scroll < previous, i.e. scrollin up
 } else {
 firstScrollDown = false; // Reset the option start scrolling down
 // If menu is not visible
 if ( scrolled > header.offset().top ) {
 // If started to scroll up
 if ( firstScrollUp === false ) {
 var topPosition = header.offset().top; // Record the current position menu
header.css({
 'top': topPosition + "px"
});
 firstScrollUp = true;
}
 // Position the menu absolutely
header.css({
 "position": "absolute"
});
 } else {
 // Remove all styles
header.removeAttr("style");
}
}
 // Prisvoeniem the current value of the scroll previous
 scrollPrev = scrolled;
 } 
 }); 
});

Everything is fine, but really miss the animation when the menu appears. Tell me, please, what and where to add in code to get the animation?
June 8th 19 at 17:17
2 answers
June 8th 19 at 17:19
Solution
I did so. Asked styles for header
.header.hide{top: -158px; transition: top .15s ease-in-out;}
.header {background: #fff; border-bottom: 1px solid #eee; position: absolute; z-index: 100; top: 0; left: 0; right: 0;}

$(window).scroll(function () {
 if ($(this).scrollTop() > 75) {
$('.header').addClass('hide');
 return false;
 } else if ($(this).scrollTop() < 158) {
$('.header').removeClass('hide');
 return false;
}
});

if ($(window).scrollTop() > 75) {
$('.header').addClass('hide');
 return false;
}

The height of the header I have equal 158px when scrole at 75px add the class .hide header smoothly and hides.
June 8th 19 at 17:21
Try the styles
.header {
 transition: top .6s ease-in-out;
}
Alas, this option is buggy with the menu :( - Mary.Effert commented on June 8th 19 at 17:24

Find more questions by tags JavaScriptCSSjQuery