24.09.2015

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

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

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

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

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

.header {
	position: fixed;
	top: 0px;
}
$(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;
		}	
	});			
});

Нам будет приятно

Поделитесь

Комментарии

Загрузка комментариев...