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

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

HIT

14.10.2018

3570

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');
	}
}

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

  • Похожие записи
  • Комментарии
  • Вложения
Меню для мобильной версии

Меню для мобильной версии

Делаем простую адаптацию меню под мобильную версию, превращая в иконку, при нажатии на которую меню раскрывается. Трансформируем меню в иконку Стандартный код вывода меню <nav id="topmenu" role="navigation"> <?php wp_nav_menu( array( Читать далее »

/
Автоматическое меню, оглавление, измененное состояние меню

Автоматическое меню, оглавление, измененное состояние меню

Меню с изменяемым состоянием может применяться для различных задач, в т.ч. для меню лэндинга или для оглавления длинной страницы. Такое меню состоит из хэш-ссылок для перемещения по самой странице. Смысл Читать далее »

Scrollspy jquery

Scrollspy jquery

Скрипт scrollspy jquery отслеживающий положение скрола, в котором мы находится в данный момент. Чаще всего это используется для изменения состояния меню, изменение фона, а также для каких-либо событий. Подключение скрипта Читать далее »

/

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

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

  1. Алексей

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

Шапка при прокрутке вверх
body_class (оформление разделов и др.)
Рекомендации для васbody_class (оформление разделов и др.)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.