Создание адаптивной фиксированной шапки сайта, изменяющей размер

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *