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

В этой статье я покажу, как сделать шапку сайта фиксированной и изменяющей размер при прокрутке. Приведенный вариант реализации может не работать в устаревших браузерах вроде IE5 или 6.

Реализация

Для начала нам нужна HTML-структура наподобие следующей:

 
 
 
LOGO
  
 
 

Код 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

В CSS-коде, приведенном выше, последние три блока имеют класс “.smaller”. Это сделает шапку меньше при прокрутке вниз. Но чтобы добавить класс “.smaller”, потребуется код jQuery:

$(function() < $(window).scroll(function() < var scroll = $(window).scrollTop(); if (scroll >= 500) < $(".header").addClass('smaller'); >else < $(".header").removeClass("smaller"); >>); >);

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

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

Не получается сделать шапку сайта(html css).Не могу расставить элементы в шапке [закрыт]

Всем доброго времени суток! Помогите пожалуйста сделать шапку сайта(макет в Figma).Брать левый вариант. Надо использовать позиционирование relative. Сама проблема: у меня не получается расположить элементы шапки так, как в макете. Я новичок в frontend, поэтому прошу вас скинуть код и объяснение к нему. Заранее спасибо

Отслеживать
задан 2 июн 2021 в 21:00
467 4 4 серебряных знака 14 14 бронзовых знаков

Здесь вам никто с нуля код писать не будет, разместите свою попытку и мы скажем, что вам лучше сделать.

3 июн 2021 в 6:35

Спасибо за совет. Но у меня вообще плохо получается. И если править мой код, то новый код. отнюдь будет не похож на старый Потому, что у меня нет идей и я ни разу не писал такие проекты.Шапка состоит из двух элементов. и если вы хорошо разбираетесь, то за 10 минут сможете написать код и объяснить

3 июн 2021 в 21:23
Я икал инфу в инете и пытался разобраться сам. Но все тщетно. Поэтому и жду ответа от профессионала
3 июн 2021 в 21:25

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Не вижу смысла использовать тут position: relative
Объясню как сделал я.

Сразу скажу что я использовал обнуляющие стили
Коротко об этом Cовременный сброс

На макете мы видим, что в шапке элементы выстроены в таком типо контейнере, но в то же время заливка в шапке должна быть до краёв экрана (каким бы экран не был), значит внутри header и контейнер с блоками

Далее для удобства будет использовать список ul
То что справа элементы это я предполагаю будут ссылки, поэтому вставляем его в li
*Также добавим первому элементу шапки(наше лого) класс .logo, опять же для удобства

Когда разметка завершена приступаем к стилям.
Из figma можно высчитать ширину всего контейнера, она 1110 пикселей, сделаем контейнер с такой шириной
Укажем контейнеру что все блоки будут по центру (свойство margin)

.container

Высота всей шапки 84px, устанавливаем фон

.header

Т.к. все элементы находятся ровно по центру шапки(вертикаль), то чтобы не морочиться с margin’ами используем свойство display: flex и align-items: center (второе без первого работать не будет)
Также указываем родителю списка (ul.menu) что его высота будет такая же как высота header (84px), это нужно для того чтобы выравнивание по вертикали было ровным.

ul.menu

Скажем нашему лого чтобы все элементы отступили от него на 502 пикселя (согласно отступу из figma)

.menu_item.logo

Теперь, когда все элементы выстроены, займёмся стилизацией правой части

.menu_item a < font-size: 24px; /*Согласно figma размер шрифта 24px*/ color: #fff; text-decoration: none; /*Отменяем стандартную стилизацию ссылок, их подчёркивание*/ padding-right: 10px; /*Справа и слева делаем отступ по 10px*/ padding-left: 10px; border-right: 2px solid #fff; /*Справа делаем что-то типо разделителя*/ >ul.menu .menu_item:last-child a < border: none; /*У последнего элемента отменяем разделитель (его нет в макете)*/ >

#2.1 — Создание шапки сайта

В проекте можно использовать различные картинки. Получить картинки можно на сайте IconFinder .

Весь код будет доступен после подписки на проект!

Онлайн редактор кода

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Как сделать шапку сайта?

На главной странице любого Интернет-ресурса присутствует так называемая «шапка», где размещены основные категории сайта. Именно с нее и начинается верстка, ведь код идет снизу-вверх, а наверху располагается только «шапка». Но как же ее создать? И как разместить в ней основные блоки с категориями? Для этого нужно иметь чёткий план по созданию сайта.

HTML

Стоит знать, что каждый код HTML начинается с. Это значит, что данная страница сделана с помощью HTML-кода. Далее идет двойной тег . В нем расположено все наполнение сайта.

Не будем останавливаться на разделе и сразу перейдем к – «телу» сайта.

Как написать «шапку»?

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

Чтобы в общем обозначить «шапку» сайта, используется класс , в котором пишутся два других класса:

• .header-top – данный класс используется для обозначения верхней шапки сайта (логотип, категории и так далее);
• .promo – этот класс используется для рекламных блоков. Например, если девиз сайта «Не смотри, а покупай!», то он будет расположен здесь.

Важно! HTML-код должен быть сохранен на компьютере под названием index.html. Так браузеру будет проще его просматривать.

Внимание! Для просмотра полученной работы лучше использовать такие браузера: Google Chrome, Mozila Firefoks, Internet Explower. Они не выдают ошибки в случае неправильного написания кода.

Доктайп, заголовок, кодировка и подключение внешних стилей

Все эти элементы пишутся при создании шапки. Почему? Все очень просто! Для определения языка страницы предназначен атрибут lang, который пишется у тега . Ну, а так как этот тег второй в кодировке сайта, соответственно, и определение языка расположено наверху.

Определение языка нужно обязательно использовать, так как без него браузер не сможет определить язык страницы и переводчик или голосовой перевод не сможет выполнить свою функцию. Поэтому к тегу нужно дописать lang=”язык страницы (ru, en и так далее)”. Это и не сложно, и поднимет сайт по сравнению с другими «не определенными» страницами.

При прописывании кодировки важно помнить, что писать ее нужно над заголовком, потому что если ее написать ниже, то браузер не сможет прочесть, что расположено в . Она задается с помощью кода utf-8.