Добавить анимацию скрытию меню навигации?

Question

[Андрей]

Наткнулся в сети на код скрытия меню при прокрутке вниз и отображении при прокрутке наверх

$(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;
		}	
	});			
});

Все отлично, но очень не хватает анимации при появлении меню. Подскажите, пожалуйста, что и куда нужно добавить в код, чтобы получить анимацию?

Comments

[Максим Тимофеев]

вы хотите, что кто-то разобрался в коде и добавил анимацию? тогда это задание, а не вопрос. Что запрещено правилами ресурса. Если нет, то в чем вопрос?

Answer 1

[I'm Yoda]

Я сделал так. Задал стили для хедера

.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;
}

Высота хедера у меня равна 158px, при скроле на 75px добавляется класс .hide и хедер плавно прячется.

Answer 2

[tyzberd]

Попробуйте стилями

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

Comments

[Андрей]

Увы, такой вариант глючит с меню :(