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

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

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

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

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