В этой статье расскажу как сделать фиксированную шапку или fixed header. Я делаю его для сайта, на котором вы читаете эту статью 🙂
Делать будем на html, css, jQuery. Если нужно на JavaScript, пишите в комментариях — доработаю.
Первое — html. Шапки у всех могут быть разные внутри, но нам важны классы у самой шапки. То, что внутри — для этого скрипта не так важно.
Код для копирования в конце статьи.
Как это будет работать
У нас есть статичная шапка, нам нужно скопировать её код и положить рядом, но дать ей классы:
.header--fixed
— привяжем стили скрытия и появления. К этому классу также можно дописать стили для вложенных элементов. Например уменьшить отступы и шрифт, чтобы шапка была компактнее..js-header-fixed
— привяжем к JS. Создаётся с приставкойjs-
в начале, чтобы никто не заменил код для стилей. Разработчики понимают, что именно этот класс связан с кодом JS и его лучше не менять. Приставка fixed означает, что класс привязывается только для фиксированной шапки.
Я откопировал код своей шапки, для статьи удалил внутренние элементы
<header class="header header--fixed js-header"> <!-- вот тут добавил классы js-header и header--fixed. Остальное не трогал. -->
<!-- содержимое шапки -->
</header>
Пока мы ничего с ней не делаем, пусть лежит.
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
<header class="header header--fixed js-header">
<!-- содержимое шапки -->
</header>
css
.header--fixed {
position: fixed;
top: 0;
opacity: 0;
z-index: -5;
left: 50%;
transform: translateX(-50%);
transition: .3s all;
width: 100%;
}
.header.is-show {
top: 20px;
opacity: 1;
z-index: 999;
}
jQuery
document.addEventListener('scroll', function () {
if ($(window).scrollTop() > 1000)) {
$('.js-header-fixed').addClass('is-show');
} else {
$('.js-header-fixed').removeClass('is-show');
}
})
Канал о фрилансе
Там я делюсь фишками о фрилансе: деньги, клиенты, автоматизация, фриланс. Раньше это был закрытый материал с платным доступом. Сейчас он открыт. Иногда подписчикам будет открываться платные материалы.
Подписаться