Закрепить шапку сайта при прокрутке страницы


Для лендинга или сайта, у которого главная страница нагружена контентом, иногда  нужно закрепить шапку сайта при скроллинге страницы. Сделать это можно двумя способами. Создать отдельную шапку, которую будем закреплять, либо стилями переделать текущую шапку.

В обоих случаях нужно написать скрипт на jQuery, который будет определять, пролистали ли мы сайт и шапка уже скрылась, и производить с ней нужные манипуляции

var head=$('.header'); /* Заносим в переменную шапку */
var bottom=head.position().top + head.outerHeight(true); /* Определяем позицию, при которой шапка будет полностью скрыта, после скроллинга */

if($(window).scrollTop()>bottom){ /* Если открытая страница ужде проскроллена ниже шапки сайта */
	/* Если создано отдельное меню, которое закрепляем, то отображаем его */
	$('.fixed-header').show();
	/* Если используем существующее меню, то добавляем класс, на который будут написаны стили */
	$('.header').addClass('scrolled');
}else{
	/* Если создано отдельное меню, которое закрепляем, то скрываем его */
	$('.fixed-header').hide();
	/* Если используем существующее меню, то удаляем класс закреплённого меню */
	$('.header').removeClass('scrolled');
}

$(window).resize(function(){ /* Если меняем разрешение окна браузера, пересчитываем позицию, при которой шапка будет полностью скрыта  */
	bottom=head.position().top + head.outerHeight(true);
});

$(window).scroll(function(){
	if($(window).scrollTop()>bottom){ /* Если шапка скрылась при скроллинге */
		/* Если создано отдельное меню, которое закрепляем, то отображаем его */
		$('.fixed-header').show();
		/* Если используем существующее меню, то добавляем класс, на который будут написаны стили */
		$('.header').addClass('scrolled');
	}else{
		/* Если создано отдельное меню, которое закрепляем, то скрываем его */
		$('.fixed-header').hide();
		/* Если используем существующее меню, то удаляем класс закреплённого меню */
		$('.header').removeClass('scrolled');
	}
});

Если закреплять текущую шапку, то можно создать такой класс со стилями

.scrolled{
	position:fixed;
	top: 0;
	left: 0;
	z-index: 999;
	-webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
    -moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
}

Для связи

Если у вас появились какие-либо вопросы, хотите получить индивидуальный совет или у вас есть интересное предложение, вы можете связаться через форму обратной связи.

Или написать прямо на почту info@bobreod.ru





Отправляя форму, вы соглашаетесь с нашей политикой конфиденциальности