Липкие блоки в HTML CSS (очень простые примеры)

Добро пожаловать в краткое руководство по созданию липких блоков в HTML и CSS.
Итак, вы хотите, чтобы какой-то блок например панель навигации оставались вверху страницы?
Есть 2 простых способа создать липкий блок в HTML CSS:

<header style="position:sticky; top:0;"> При этом header будет располагаться вверху, когда пользователь прокручивает страницу вниз.
<header style="position:fixed; top:0; left:0; width:100%"> Это навсегда зафиксирует header вверху.

Хорошо, давайте теперь перейдем к примерам липкого header в HTML и CSS.

ПРИМЕР 1) ПРИКРЕПЛЯЙТЕ HEADER ПО МЕРЕ ПРОКРУТКИ ПОЛЬЗОВАТЕЛЕМ

HTML

<!-- (A) нав бар -->
<nav id="page-nav">меню</nav>
<!-- (B) прекреплённый header -->
<header id="page-head">HEADER</header>
<!-- (C) контент -->
<main id="page-main">Контент</main>

На этой фиктивной странице есть 3 раздела.
A. <nav id="page-nav"> Верхняя панель навигации, эта не залипает.
B. <header id="page-head"> Липкий header страницы.
C. <main id="page-main"> Основное содержимое.

CSS

/* (A) прекреплённый header */
#page-head {
position: sticky;
top: 0;
z-index: 9;
}

Как и в приведенном выше фрагменте, нам нужно только добавить position: sticky; top: 0;, чтобы создать липкий header.
z-index: 9 убедитесь, что header расположен слоями выше других элементов; Просто укажите большее число, если он будет закрыт другим “плавающим элементом”.

ПРИМЕР 2) ЗАФИКСИРОВАННЫЙ HEADER

HTML

<!-- (A) зафиксированный header -->
<header id="page-head">HEADER</header>
<!-- (B) Контент -->
<main id="page-main">контент</main>

A. <header id="page-head"> Зафиксированный header.
B. <main id="page-main"> Содержимое.

C) CSS

/* (A) HEADER */
#page-head {
/* зафиксировано с верху */
position: fixed;
top: 0;
left: 0;
z-index: 9;
/* размеры */
width: 100%;
height: 60px;
padding: 10px;
/* выравнивание */
display: flex;
align-items: center;
}
/* (B) Контент */
/* добавьте верхний интервал, чтобы он не был закрыт header */
#page-main {
margin-top: 80px;
padding: 10px;
}

A. Установите header.
position: fixed; top: 0; left: 0; z-index: 9; Постоянно фиксируются в верхней части окна.
width: 100%; height: 60px; padding: 10px; Задайте размеры фиксированному header.
display: flex; align-items: center; На самом деле необязательно, но так header выглядит приятнее.
B. Header постоянно закреплен в верхней части окна, и мы не хотим, чтобы контент был скрыт под ним. Таким образом, margin-top: 80px намеренно оставит пустое пространство вверху для header.

ПРИМЕР 3) ОПРЕДЕЛЕНИЕ ТОГО, КОГДА ЗАГОЛОВОК “ПРИЛИП”

HTML

<!-- (A) нав бар -->
<nav id="page-nav">меню</nav>
<!-- (B) зафиксированный header -->
<header id="page-head">HEADER</header>
<!-- (C) Контент -->
<main id="page-main">контент</main>

Дальше то же самое, что и в предыдущем примере. Но мы применим другой цвет фона к header, когда она зафиксируется сверху.

C) CSS

/* (A) зафиксированный header */
#page-head {
position: sticky;
top: -1px;
z-index: 9;
}
#page-head.stuck {
background: red;
}

Как нам определить, зафиксировался ли header вверху? К сожалению, псевдокласса CSS :stuck не существует, но у нас есть небольшая хитрость для обнаружения залипания. Обратите внимание на то, что мы заменяем header на top: -1px.

JAVASCRIPT

window.addEventListener("load", () => {
const observer = new IntersectionObserver(
([e]) => e.target.classList.toggle("stuck", e.intersectionRatio < 1),
{ threshold: [1] }
);
observer.observe(document.getElementById("page-head"));
});

По сути, top положение будет меняться, когда header застрянет.
Мы просто используем Javascript IntersectionObserver для обнаружения этого изменения.
Когда header залипает, мы применяем к нему .stuck класс CSS.

Вы можете скачать готовый пример:

Скачать пример

Обсуждение закрыто.