← Все статьи

Туториалы

Укроти sticky-элементы, закрывающие твой контент

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

Sticky-шапка, остающаяся высотой 90 px, пока ты прокручиваешь. Плавающая панель «подпишись на рассылку». Кнопка «наверх», закрывающая последнюю фразу абзаца. Элементы, приклеенные к экрану, могут съедать треть вида. Вот как их укротить.

Что их приклеивает

Два CSS-свойства: position: sticky (элемент приклеивается, как только ты прокрутишь до его места) и position: fixed (элемент стоит неподвижно с самого начала). Оба можно переопределить.

Два подхода

Открепить — элемент остаётся, но прокручивается со страницей. Хорошо для полезных шапок, которым просто не нужно стоять наверху вечно.

header, .site-header, .navbar,
[class*="sticky"], [class*="fixed"] {
  position: static !important;
}

Скрыть — элемент исчезает совсем. Хорошо для плавающих CTA, виджетов «наверх», промо-полос.

[class*="back-to-top"], [class*="scroll-top"],
[class*="sticky-cta"], [class*="floating-bar"] {
  display: none !important;
}

Как найти виновника

Не уверен, какой элемент приклеен? Открой JS Console JustZix и напечатай:

[...document.querySelectorAll('*')]
  .filter(el => {
    const p = getComputedStyle(el).position;
    return p === 'fixed' || p === 'sticky';
  })
  .forEach(el => console.log(el));

Консоль перечислит каждый fixed и sticky элемент — наведи мышь на каждый, чтобы увидеть его на странице, потом скопируй его класс в селектор правила.

Ловушки

• Открепление шапки может стоить тебе эстетически. Некоторые layout рассчитывают на то, что шапка fixed; после position: static контент под ней может прыгнуть вверх. Обычно приемлемо, но проверь.
• Не каждый sticky плох. Sticky-оглавление или индикатор прогресса чтения могут быть полезны — целься точно, не оптом.
• Селекторы по фрагменту класса. [class*="fixed"] попадает и в .fixed-width, который к позиционированию никакого отношения не имеет. position: static на нём ничего не ломает, но об этом стоит знать.

Смотри также

• Примеры — сниппет для скрытия чат-виджетов и другие
• Скрытие cookie-баннеров — родственное прореживание навязчивых элементов
• Построй свой режим чтения — прореживание страницы до конца

Установи JustZix — и верни экран, занятый приклеенными панелями.