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