От автора: представьте себе красивый и высокий header веб-сайта с большим количеством отступов сверху и снизу от содержимого. Когда вы прокручиваете вниз, он сжимается, уменьшая часть заполнения рабочей области, освобождая экран для другого контента.
Обычно вам придется использовать некоторый JavaScript, чтобы добавить подобный эффект сжатия, но с момента появления position: sticky есть способ сделать это, используя только CSS.
Позвольте мне сказать вот что: я вообще не поклонник громоздких заголовков. Думаю, они занимают слишком много места на экране. Однако стоит ли вам использовать большие и громоздкие заголовки на своем сайте — это другой вопрос. Это действительно зависит от вашего контента и от того, нужна ли вам постоянная навигация. Если вы все же используете его, будьте особенно осторожны, чтобы случайно не закрыть или скрыть контент или функциональные возможности громоздкими областями — это приведет к потере данных.
В любом случае, вот как это сделать без JavaScript, начиная с разметки. Здесь ничего сложного — <header> с указанием класа и div который содержит логотип и навигацию.
<header class="header-outer"> <div class="header-inner"> <div class="header-logo">...</div> <nav class="header-navigation">...</nav> </div> </header>
Что касается стиля, мы объявим высоту для header (120 пикселей) и настроим его как флэкс-контейнер, который выравнивает потомка по центру. Затем сделаем его sticky.
.header-outer { display: flex; align-items: center; position: sticky; height: 120px;
}Внутренний контейнер содержит все элементы заголовка, такие как логотип и навигация. Внутренний контейнер в некотором смысле является фактическим заголовком, в то время как единственная функция родительского элемента header — сделать заголовок выше, чтобы было что сокращать.
Пропишем внутреннему контейнеру высоту 70 пикселей и также сделаем его sticky.
.header-inner { height: 70px; position: sticky; top: 0; }Видите top: 0? Это нужно чтобы убедится, что контейнер расположится на самом верху, когда станет sticky.
А теперь трюк! Чтобы внутренний контейнер на самом деле прилип к «потолку» страницы, мы должны дать родителю header отрицательную величину top, равную разности высот между двумя контейнерами, что заставляет его придерживаться «сверху» в окне просмотра. Это 70 пикселей минус 120 пикселей, 50 пикселей. Добавим это.
.header-outer { display: flex; align-items: center; position: sticky; top: -50px; /* Equal to the height difference between header-outer and header-inner */ height: 120px;
}Давайте теперь соберем все вместе. header выдвигается из кадра, а внутренний контейнер аккуратно помещается в верхней части области просмотра.
Мы можем распространить это на другие элементы! Как насчет постоянного предупреждения?
Поскольку это работает замечательно, мы можем сделать это в CSS, но у него есть ограничения. Например, внутренний и внешний контейнеры имеют фиксированную высоту. Это делает их уязвимыми для изменения, например, если элементы навигации переносятся, потому что количество пунктов меню превышает количество места.
Еще одно ограничение? Логотип не может уменьшиться. Это, пожалуй, самый большой недостаток, поскольку логотипы часто являются самым большим виновником съедания места.
Автор: Håvard Brynjulfsen
Источник: css-tricks.com
Редакция: Команда webformyself.