Уменьшение шапки сайта при прокрутке, с закреплением при скроле

Очень часто на сайтах приходится реализовывать шапку, которая закреплена в верхней части страницы, да еще и изменяется при прокрутке/скроле страницы. Чтобы уменьшить шапку сайта при прокрутке, воспользуйтесь нашей инструкцией.

Это очень удобно с точки зрения пользователей, как бы много они не прочитал информации, основное меню и контакты всегда остаются перед глазами. Теперь давайте разберемся как сделать такую шапку сайта.

demo

HTML разметка

<header>
<h2>уменьшить шапку сайта при прокрутке, с закреплением при скроле</h2>
</header>

Тут все очень просто, все, что находится в теге header будет нашей шапкой. В DEMO примере мы используем текст, хотя сюда можно добавить все, что необходимо (логотип, меню и тд).

html, body,h1{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
header{
text-align: center;
font-size: 2em;
line-height: 80px;
height: 3em;
background: #30b252;
color: #fff;
// анимация сжатия
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
header.glide {
position: fixed;
font-size: 1.5em;
line-height: 2em;
height: 52px;
width: 100%;
background: #e5ffed;
color: #000;
text-align: left;
padding-left: 2em;
border-bottom: 1px solid #30b252;
}

Стили достаточно простые. Мы задаем цвет и размер текста, высоту межстрочного интервала, отступы и фон. А так же удаляем все отступы у элементов html, body,h1. Это делается для того, чтобы наша шапка прилипала строго по кромке окна, без отступов вверху и по бокам.

Теперь, чтобы все волшебство заработало, необходимо подключить скрипты
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- скрипт шапки-->
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("glide");
}
else{
$('header').removeClass("glide");
}
});
</script>

Первый скрипт — это библиотека, он необходим, чтобы браузер понимал, как обрабатывать другие скрипты. Если он у вас подключен, второй раз добавлять эту строку не нужно.

Второй скрипт это тот магический код, который будет изменять вид шапки при прокрутке страницы.
Фактически он смотрит на элемент header и как только прокрутка достигает необходимого места, меняет этому элементу стили, в нашем случае с header на header.glide.

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

Поделиться в социальных сетях: