← Все статьи

Туториалы

Уберите липкие шапки, закрывающие контент

17 мая 2026 · автор JustZix Team

Липкие шапки задумывались, чтобы держать навигацию под рукой. Слишком часто они просто преследуют вас вниз по странице, поглощая треть экрана и пряча заголовок, к которому вы только что перешли. Вот как укротить их с JustZix.

Две проблемы липких шапок

Во-первых, они стоят вертикального пространства — на ноутбуке толстая липкая панель плюс липкая cookie-полоса могут съесть половину окна. Во-вторых, они ломают якорные ссылки: переходите к разделу — и заголовок оказывается за шапкой, скрытым. Обе проблемы решаются чистым CSS.

Рецепт 1: полностью «отлепить» шапку

Если вам не нужно, чтобы панель навигации следовала за вами, самое чистое решение — заставить её прокручиваться вместе с обычным контентом.

/* Заставить шапки прокручиваться как обычно */
header, .site-header, .navbar,
[class*="sticky-header"], [class*="header-fixed"],
[style*="position: sticky"], [style*="position:fixed"] {
  position: static !important;
  top: auto !important;
}

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

Рецепт 2: оставить шапку, но починить якорные переходы

Может быть, вам нравится липкая панель и вы лишь ненавидите, что она закрывает заголовки после якорного перехода. Свойство scroll-margin-top говорит браузеру оставить место.

/* Не дать липкой шапке прятать цели якорей */
:target,
h1[id], h2[id], h3[id], h4[id] {
  scroll-margin-top: 90px !important;
}

Задайте значение примерно равным высоте шапки. Если заголовки всё ещё оказываются слишком высоко или слишком низко, подстройте 90px, пока разделы с якорями не встанут прямо под панелью.

Рецепт 3: уменьшить непомерно большую шапку

Некоторые шапки и липкие, и огромные. Если вы хотите оставить её закреплённой, но вернуть место, ограничьте её высоту и скройте громоздкие дополнения.

/* Сделать раздутую липкую шапку тоньше */
.site-header, header.sticky {
  max-height: 48px !important;
  overflow: hidden !important;
}

/* Убрать вторичные ряды: поисковые строки, промо-полосы */
.header-promo, .header-secondary,
.sub-nav, .announcement-bar {
  display: none !important;
}

Рецепт 4: прятать шапку, пока вы не прокрутите вверх

Для более изящного результата прячьте шапку во время чтения и показывайте её только при прокрутке вверх. Для этого нужно небольшое JS-правило.

// Показывать шапку только при прокрутке вверх
let lastY = window.scrollY;
const bar = document.querySelector('header, .site-header, .navbar');

if (bar) {
  bar.style.transition = 'transform .2s ease';
  window.addEventListener('scroll', () => {
    const y = window.scrollY;
    bar.style.transform =
      (y > lastY && y > 200) ? 'translateY(-100%)' : 'translateY(0)';
    lastY = y;
  }, { passive: true });
}

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

Не забудьте о подвале

Липкие подвалы и пузыри чата вызывают ту же проблему поглощения контента внизу экрана. Тот же подход убирает их:

/* Убрать липкие подвалы и виджеты чата */
.sticky-footer, [class*="cookie-bar"],
[class*="chat-widget"], [id*="intercom"],
[class*="floating-cta"] {
  display: none !important;
}

Выберите правильный рецепт

• Хотите максимум места? Используйте Рецепт 1.
• Нравится панель навигации, ненавидите переходы? Используйте Рецепт 2.
• Хотите компромисс? Сочетайте Рецепты 3 и 4.

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

Начните возвращать себе экран

Установите со страницы скачать JustZix и просмотрите готовые примеры за другими исправлениями вёрстки. Липкие шапки часто делят пространство с рекламными баннерами — уберите и их с нашим руководством на /ru/blog/block-display-ads-with-css-rules.