Add animation to hide navigation menu?

Question

css

I came across on the net the code for hiding the menu when scrolling down and displaying it when scrolling up

$(document).ready(function() {
  
  var header = $(".header"); // Меню
  var scrollPrev = 0 // Предыдущее значение скролла
  
  $(window).scroll(function() {
    var scrolled = $(window).scrollTop(); // Высота скролла в px
    var firstScrollUp = false; // Параметр начала сколла вверх
    var firstScrollDown = false; // Параметр начала сколла вниз
    
    // Если скроллим
    if ( scrolled > 0 ) {
      // Если текущее значение скролла > предыдущего, т.е. скроллим вниз
      if ( scrolled > scrollPrev ) {
        firstScrollUp = false; // Обнуляем параметр начала скролла вверх
        // Если меню видно
        if ( scrolled < header.height() + header.offset().top ) {
          // Если только начали скроллить вниз
          if ( firstScrollDown === false ) {
            var topPosition = header.offset().top; // Фиксируем текущую позицию меню
            header.css({
              "top": topPosition + "px"
            });
            firstScrollDown = true;
          }
          // Позиционируем меню абсолютно
          header.css({
            "position": "absolute"
          });
        // Если меню НЕ видно
        } else {
          // Позиционируем меню фиксированно вне экрана
          header.css({
            "position": "fixed",
            "top": "-" + header.height() + "px"
          });
        }
        
      // Если текущее значение скролла < предыдущего, т.е. скроллим вверх
      } else {
        firstScrollDown = false; // Обнуляем параметр начала скролла вниз
        // Если меню не видно
        if ( scrolled > header.offset().top ) {
          // Если только начали скроллить вверх
          if ( firstScrollUp === false ) {
            var topPosition = header.offset().top; // Фиксируем текущую позицию меню
            header.css({
              "top": topPosition + "px"
            });
            firstScrollUp = true;
          }
          // Позиционируем меню абсолютно
          header.css({
            "position": "absolute"
          });
        } else {
          // Убираем все стили
          header.removeAttr("style");
        }
      }
      // Присваеваем текущее значение скролла предыдущему
      scrollPrev = scrolled;
    }	
  });			
});

Everything is fine, but the animation when the menu appears is very lacking. Can you please tell me what and where to add to the code to get the animation?

Answer 1

I did so. Styling the 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;
}

I have a header height of 158px, when scrolling by 75px, the .hide class is added and the header is smoothly hidden.

Answer 2

Try styles

.header {
  transition: top .6s ease-in-out;
}