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

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

HIT

14.10.2018

4577

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

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

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

Добавление кнопки more при узком меню

Если пункты меню не вмещаются в его заданную ширину, то их можно спрятать в кнопку more. Вариант 1 Работает в целом неплохо. Но если именно придираться, то при изменении размера Читать далее »

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

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

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

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

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

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

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

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

  1. Алексей

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

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