Зафиксировать меню и сайдбар (position: sticky)

В CSS 3 для свойства position появилось новое значение «sticky», которая закрепляет элемент в пределах родительского тега.

<div class="page">
    <div class="top-panel">Фиксированная панель в пределах родительского тега .page</div>
    <!-- HTML-контент страницы -->
</div>

/* CSS */
.top-panel {
    position: sticky;
    top: 0;
}

Одно из основных преимуществ данного свойства перед position: fixed в том, что вёрстка не рушится, если элементу задать значение «sticky».

Значение «sticky» работает во всех современных браузерах (не работает в Internet Explorer, но поддерживается в Internet Edge).

Если при прокрутке вниз, закреплять надо только меню (без шапки), для этого также достаточно указать свойство position: sticky.

<div class="page">
    <header> ... </header>

    <div class="top-panel">Панель, которая при прокрутке будет закрепляться сверху страницы
и возвращаться на исходную позицию при прокрутке в начало страницы</div>

    <!-- HTML-контент страницы -->
</div>

Чтобы закрепить сайдбар, для него также достаточно указать свойство position: sticky. При этом, сайдбар будет закреплён только в пределах своего родительского тега, т.е. он не будет вылезать, например, в подвал сайта.

Обновлено: 01 ноября 2020

Зафиксировать меню и сайдбар (position: sticky)

Закрепить только меню, без шапки

Закрепить сайдбар