Как сделать шапку сайта фиксированной и изменяющей размер
В этой статье я покажу, как сделать шапку сайта фиксированной и изменяющей размер при прокрутке. Приведенный вариант реализации может не работать в устаревших браузерах вроде IE5 или 6.
Реализация
Для начала нам нужна HTML-структура наподобие следующей:
<div class="header">
<div class="container clearfix">
<h1 id="logo"> LOGO </h1>
<nav>
<a href="">Lorem</a>
<a href="">Ipsum</a>
<a href="">Dolor</a>
</nav>
</div>
</div>
Код CSS, приведенный ниже – это базовые стили заголовка.
.header {
width: 100%;
height: 150px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #3b8dbd;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s;
}
.header h1#logo {
display: inline-block;
height: 150px;
float: left;
margin-left: 50px;
font-family: "Oswald", sans-serif;
font-size: 60px;
color: white;
font-weight: 400;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.header nav {
display: inline-block;
float: right;
margin-right: 50px;
}
.header nav a {
line-height: 150px;
margin-left: 20px;
color: #9fdbfc;
font-weight: 700;
font-size: 18px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.header nav a:hover {
color: white;
}
.header.smaller {
height: 75px;
}
.header.smaller h1#logo {
width: 150px;
height: 75px;
font-size: 30px;
}
.header.smallernav a {
line-height: 75px;
}
В CSS-коде, приведенном выше, последние три блока имеют класс “.smaller”. Это сделает шапку меньше при прокрутке вниз. Но чтобы добавить класс “.smaller”, потребуется код jQuery:
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".header").addClass('smaller');
} else {
$(".header").removeClass("smaller");
}
});
});
После того, как вы добавите этот код в раздел <head> и подключите библиотеку jQuery, шапка веб-страницы должна будет изменять свой размер при прокрутке вниз.
Чтобы сделать ее адаптивной, необходимо добавить несколько строк кода CSS:
@media all and (max-width: 660px) {
.header h1#logo {
display: block;
float: none;
margin: 0 auto;
height: 100px;
line-height: 100px;
text-align: center;
}
.header nav {
display: block;
float: none;
height: 50px;
line-height: 50px;
text-align: center;
margin: 0 auto;
}
.header nav a {
line-height: 50px;
margin: 0 10px;
}
.header.smaller {
height: 75px;
}
.header.smaller h1#logo {
height: 40px;
line-height: 40px;
font-size: 30px;
}
.header.smallernav {
height: 35px;
line-height: 35px;
}
.header.smallernav a {
line-height: 35px;
}
}
Теперь при уменьшении размера окна браузера при ширине в 660 пикселей вы увидите, что логотип переместится в середину. При этом меню навигации «съедет» под логотип и расположится по центру.
Если вам понравилась эта статься, поделитесь ей со своими друзьями!