Как сделать шапку сайта фиксированной и изменяющей размер

В этой статье я покажу, как сделать шапку сайта фиксированной и изменяющей размер при прокрутке. Приведенный вариант реализации может не работать в устаревших браузерах вроде 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 пикселей вы увидите, что логотип переместится в середину. При этом меню навигации «съедет» под логотип и расположится по центру.

Если вам понравилась эта статься, поделитесь ей со своими друзьями!

Дайте знать, что вы думаете по этой теме статьи в комментариях. За комментарии, подписки, лайки, отклики, дизлайки низкий вам поклон!