How to smoothly hide menu using css and jquery?

Question

css

Hello, it is necessary that on the first screen the menu should be in the usual position, then when scrolling down the page, it smoothly leaves from above, and when scrolling up, it also smoothly hides back. I am using code:

$(window).scroll(function(){
            if ($(this).scrollTop() > 350) {
                $('.header').addClass('fixed');
            } else {
                $('.header').removeClass('fixed');
            }
        });

.header {
  height: 50px;
  top: -50px;
  transition: top 1s; }

.fixed {
  z-index: 99999;
  position: fixed;
  top: 0;
  width: 100%;
  transition: top 1s; }

The problem is that the block moves out smoothly when scrolling down, but when scrolling up, it hides abruptly. How can I make it so that when scrolling up, the block also leaves smoothly?

Answer 1

https://www.w3schools.com/jquery/eff_slidetoggle.asp

Answer 2

So there is a slidetogle in jquery. Use it and set the time you need to leave.