Шапка

В качестве контента я сгенерировала специально побольше абзацев на Lorem Ipsum (ресурс для генерации текста) , чтобы у нас впоследствии была возможность поскролить и проверить фиксацию наших элементов.

Итак, вот содержимое html-файла с комментариями:

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

Итак, создаем css-файл с именем «fix.css» (можете дать и другое имя, но тогда не забудьте его поменять в атрибуте href тега link, который подключает файл таблицы стилей) и сохраняем в том же каталоге, что и наш html-файл.

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

Давайте займемся стилями и расставим все по своим местам.

Для начала я пропишу правило, чтобы все мои html5-элементы отображались как блочные (это решение для старых браузеров, которые не поддерживают данные элементы. Если бы не используете html5-теги, то можете не писать эту строчку). Также задам правило для тега body: мы зададим ему ширину, выравнивание по центру, рамку и цвет фона.

article,aside,footer,header,nav body

Теперь страница должна выглядеть вот так.

Страницу мы оцентровали, теперь давайте перейдем к стилям самой шапки.

Для того чтобы сделать нашу шапку фиксированной нам нужно задать для нее высоту, ширину и прописать position:fixed. Ширина нам в данном случае нужна такая же, как и ширина для тега body, то есть 980px, а высоту я взяла равную значению 300px.

Теперь поговорим о свойстве position. Когда для position задано значение fixed, то элемент фиксируется на определенном месте страницы. Также при значении position:fixed мы можем регулировать расположение элемента при помощи таких свойств, как top, right, bottom и left (но в случае с шапкой нам это не понадобится). Элемент с таким позиционированием привязывается к координатам окна и при прокрутке страницы остается на месте.

Также я придам нашей шапке цвет, рамку и выровняю текст, находящийся в ней по центру.

И также на этом этапе давайте придадим стили для заголовков на нашей странице и для тегов абзаца. Здесь ничего особенного – просто пропишем стиль шрифта, цвет и некоторые отступы.

Добавьте этот код в Ваш css-файл:

header header h1,header h2, header h3, article p, footer p, aside p < font-family:Arial, Helvetica, sans-serif; color:#336;>header h1

Если мы посмотрим на нашу страницу сейчас, то увидим следующее.

3. Шапка зафиксировалась. Вы можете промотать страницу вниз и убедиться в том, что она не движется.

Но, как Вы уже, наверное, заметили, часть нашего контента переместилась под шапку – так и должно быть, это особенность такого позиционирования. Скоро мы все расставим на свои места.

А пока давайте займемся стилями нашего сайдбара, который мы тоже собрались зафиксировать.

Нам нужно также определить для сайдбара ширину, задать ему фиксированное позиционирование, а также здесь мы воспользуемся свойством top, так как нам необходимо подкорректировать позицию блока сайдбара и сместить его под шапку (иначе он так и останется за шапкой). Я взяла для top значение 330px (300px – это высота нашей шапки и + еще 30 пикселей, чтобы шапка и сайдбар не были прилеплены друг к другу).

Это основное для позиционирования. Остальные стили придают цвет, рамку, отступы для текста, размер текста и т.д.

Добавьте вот этот код в Ваш файл таблицы стилей.

aside aside h2 aside p aside li aside a

И вот, что у нас получится.

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

Это очень просто исправить, ведь мы знаем высоту нашей шапки и ширину сайдбара, а также ширину страницы. Ширина страницы равна 980px, а ширина сайдбара 200. Следовательно, мы можем задать для блока с контентом ширину равную 700px и сделать отступ от левого края 230 px (30 px чтобы блок с контентом не «прилипал» к сайдбару). А зная, что высота шапки равна 300px, мы можем задать и отступ сверху в 300px (здесь мы не берем больше, потому что заголовок в начале статьи уже автоматически имеет отступ сверху).

А также зададим простые стили для футера (только для того, чтобы определить его внешний вид).

Добавьте последний фрагмент кода в свой файл таблицы стилей и посмотрите результат.

Теперь можно скролить и скролить, а Ваша шапка и сайдбар всегда будут перед глазами.

На этом буду заканчивать. Исходники файлов Вы, как всегда, можете найти в Исходниках к уроку, а посмотреть эту страницу в браузере, можете нажав на кнопку «Демо» в начале урока.

Надеюсь урок был Вам полезен! Жду Ваших отзывов! Делитесь уроком с друзьями при помощи кнопок социальных сетей (буду очень признательна).

А также подписывайтесь на обновление блога, если Вы на него еще не подписаны. Дальше будет еще интереснее.

Успехов Вам, друзья, Хорошего Весеннего настроения и Удачных проектов!

С Вами была Анна Котельникова. До встречи!

Источник

Фиксированная шапка

Делать будем на html, css, jQuery. Если нужно на JavaScript, пишите в комментариях — доработаю.

Первое — html. Шапки у всех могут быть разные внутри, но нам важны классы у самой шапки. То, что внутри — для этого скрипта не так важно.

Как это будет работать

У нас есть статичная шапка, нам нужно скопировать её код и положить рядом, но дать ей классы:

• .header—fixed — привяжем стили скрытия и появления. К этому классу также можно дописать стили для вложенных элементов. Например уменьшить отступы и шрифт, чтобы шапка была компактнее.
• .js-header-fixed — привяжем к JS. Создаётся с приставкой js- в начале, чтобы никто не заменил код для стилей. Разработчики понимают, что именно этот класс связан с кодом JS и его лучше не менять. Приставка fixed означает, что класс привязывается только для фиксированной шапки.

Я откопировал код своей шапки, для статьи удалил внутренние элементы

Пока мы ничего с ней не делаем, пусть лежит.

CSS

Дальше дело за CSS. Нам нужно прописать стили, чтобы сначала фиксированную шапку скрыть, а при активном классе показать с анимацией.

/* Класс для отдельной фиксированной шапки, которая фиксирует и задаёт скрытие до проявления */ .header--fixed < position: fixed; /* фиксированное положение */ top: 0; /* отступ сверху */ opacity: 0; /* делаем прозрачной*/ z-index: -5; /* положение на странице, так мы спрятали её под всеми «слоями» сайта*/ /* ниже трюк с вырваниванием элементов absolute и fixed */ left: 50%; transform: translateX(-50%); transition: .3s all; /* плавность анимации появления */ /* если фиксированная шапка маленька по ширине, можно поставить 100% ширину */ width: 100%; >/* Класс, который добавляется при скролле и показывает шапку */ .header.is-show < top: 20px; /* она будет плавно выезжать с 0 до 20 пикселей*/ opacity: 1; /* делаем непрозрачной */ z-index: 999; /* устанавливаем индекс так, чтобы шапка была выше всех элементов */ >

jQuery

С помощью jQuery мы должны понять, насколько пользователь проскроллил и добавить класс к шапке:

• если расстояние прокрутки сайта больше 1000 пикселей — добавляем класс к шапке
• если расстояние прокрутки сайта меньше 1000 пикселей — удаляем класс у шапки

// Событие, которое отслеживает скроллит ли человек. document.addEventListener('scroll', function () < if ($(window).scrollTop() >1000)) < // если больше 1000 → добавляем класс $('.js-header-fixed').addClass('is-show'); >else < // если меньше 1000 → удаляем класс $('.js-header-fixed').removeClass('is-show'); >>) 

Смотрим результат

Все вместе без комментариев в коде

html

css

jQuery

document.addEventListener('scroll', function () < if ($(window).scrollTop() >1000)) < $('.js-header-fixed').addClass('is-show'); >else < $('.js-header-fixed').removeClass('is-show'); >>) 

Источник

Фиксированное позиционирование

Фиксированное позиционирование элемента задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left , top , right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.

Для фиксированного позиционирования характерны следующие особенности.

• При прокрутке веб-страницы элемент остаётся на своём исходном месте.
• Положение элемента всегда отсчитывается от области просмотра браузера, независимо от позиционирования родителя.
• При выходе элемента за пределы видимой области справа или снизу от неё, не возникает полос прокрутки и элемент просто «обрезается».

В остальном, значение fixed похоже на absolute .

Применяется такой тип позиционирования для создания меню, вкладок, заголовков, в общем, любых элементов, которые должны быть закреплены на веб-странице и всегда видны посетителю. В примере 1 показано добавление «шапки», которая остаётся на одном месте независимо от объёма информации на сайте.

Пример 1. Использование fixed

Результат примера показан на рис. 1. Поскольку фиксированный элемент накладывается на текст и скрывает его, добавлен отступ сверху для . Тем самым текст сдвигается вниз на высоту «шапки».

Рис. 1. Фиксированная «шапка»

fixed подобно absolute также может использоваться для вывода диалоговых окон и сообщений, но при этом фиксированное сообщение невозможно прокрутить вверх или вниз, оно всегда остаётся на своём месте. В примере 2 для вывода блока в центре веб-страницы мы позиционируем его с помощью свойств left и top со значением 50%. При этом ровно по центру окажется левый верхний угол, поэтому весь блок смещаем влево и вверх на половину его ширины и высоты с помощью свойства transform. Размеры блока вычисляются автоматически и равны размеру содержимому плюс значения padding .

Пример 2. Фиксированный блок

Результат данного примера показан на рис. 2.

Рис. 2. Сообщение в центре веб-страницы

Источник

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

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

Реализация

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

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

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

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

Источник