Месяц: Март 2022

В этой статье расскажу как сделать фиксированную шапку или 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');
  }    
})