/ Scripts & jquery / Шапка при прокрутке вверх

Шапка при прокрутке вверх

HIT

14.10.2018

4652

1

Делаем шапку, которая скрывается при прокрутке вниз и появляется при прокрутке вверх.

Верстка и стили

header нужно добавить class=»nav-down». Особенность стилей в том, что header должен быть fixed, a body с верхним отступом:

body {padding-top: 115px;} /* в зависимости от высоты шапки + отступ */

body > header {width: 100%; z-index: 99; position: fixed; top: 0; transition: top 0.7s ease-in-out;}

.nav-up {top: -36px;}

Если необходимо скрывать часть шапки при прокрутке вниз, указываем необходимое количество px (например для верхнего меню -36px). А если необходимо полностью скрывать шапку, указываем -100%.

Скрипт

jQuery(document).ready(function(){  

	// // Hide Header on on scroll down
	var didScroll;
	var lastScrollTop = 0;
	var delta = 5;
	var navbarHeight = $('header').outerHeight();

	$(window).scroll(function(event){
		didScroll = true;
	});

	setInterval(function() {
		if (didScroll) {
			hasScrolled();
			didScroll = false;
		}
	}, 250);

	function hasScrolled() {
		var st = $(this).scrollTop();

		// Make sure they scroll more than delta
		if(Math.abs(lastScrollTop - st) <= delta)
			return;

		// If they scrolled down and are past the navbar, add class .nav-up.
		// This is necessary so you never see what is "behind" the navbar.
		if (st > lastScrollTop && st > navbarHeight){
			// Scroll Down
			$('header').removeClass('nav-down').addClass('nav-up');
		} else {
			// Scroll Up
			if(st + $(window).height() < $(document).height()) {
				$('header').removeClass('nav-up').addClass('nav-down');
			}
		}

		lastScrollTop = st;
	}
	
});

Альтернативный вариант

Заранее header никакого класса не прописываем. Стили header следующие:

body > header {width: 100%; z-index: 999; position: sticky; top: -100%; transition: top 0.7s ease-in-out;}

.nav-up {top: 0;}

Скрипт при этом будет практически таким же, вот эту часть можно немного сократить:

if (st > lastScrollTop && st > navbarHeight){
	// Scroll Down
	$('header').removeClass('nav-up');
} else {
	// Scroll Up
	if(st + $(window).height() < $(document).height()) {
		$('header').addClass('nav-up');
	}
}

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Вертикальное многоуровневое меню

Вертикальное многоуровневое меню

Создадим вертикальное многоуровневое меню. За основу берем верстку стандартного меню WordPress. Условно у меню будет id menu. Стили:

Манипуляции с меню

Манипуляции с меню

Проводим различные эксперименты и манипуляции с меню. Добавить пункт функцией Добавляем произвольный пункт меню при помощи функции (!данный пример будет работать только с установленным плагином woocommerce) В данном случае добавляется Читать далее »

Фиксированное меню 2.0

Фиксированное меню 2.0

Продолжая работать над совершенствованием фиксированного меню, нашел следующее решение. Верстка фиксируемого блока <div id="stick_menu" class="default"> В отличие от предыдущей версии меню, перед блоком ставить ничего не нужно. Стили для фиксированного Читать далее »

Добавить комментарий

1 комментарий

  1. Алексей

    Отличный скриптик!) Всё четко и по полочкам, без «Воды», Спасибо!!

Шапка при прокрутке вверх
window.location
Рекомендации для васwindow.locationOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.