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

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

14.10.2018

75

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

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

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

Поделится информацией с друзьями

  • Комментарии
  • Вложения

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

Пока нет комментариев. Будь первым!

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