24.09.2015

Скрытие меню при прокрутке вниз и отображение при прокрутке наверх

Сегодня для одного из наших проектов написали небольшой скрипт, который позволяет прятать меню при скролле контента вниз и показывать при скролле наверх. Этот метод буден полезен во многих случаях, например, когда у вас очень длинный контент, но перекрывать его фиксированным наверху меню вы не хотите. Так же это весьма оригинальное решение и сейчас часто встречается на многих сайтах.

Для внедрения на свой сайт вам необходимо подключить библиотеку jQuery, затем вставить следующий скрипт, где во второй строке надо написать id или class вашего меню.

Затем в стилях вашего меню нужно добавить следующие параметры (см.ниже).

После этого ваше меню будет прятаться при скролле вниз и снова отображаться при скролле наверх.

.header {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	transition: all .3s ease;
}
.header.out {
	transform: translateY(-100%);
}

var header = $('.header'),
	scrollPrev = 0;

$(window).scroll(function() {
	var scrolled = $(window).scrollTop();
 
	if ( scrolled > 100 && scrolled > scrollPrev ) {
		header.addClass('out');
	} else {
		header.removeClass('out');
	}
	scrollPrev = scrolled;
});