Плавающий (липкий) хедер упрощает навигацию по сайту. С технической точки зрения, наиболее часто эту технику реализуют с помощью JavaScript-кода. Но также липкий хедер можно создать и с помощью простых CSS-правил, которые мы и рассмотрим в этой статье.
Основная CSS-команда, которая вам понадобится, чтобы создать плавающий хедер в своем Shopify-магазине выглядит так:
position: sticky;
Простота такого решения имеет негативные особенности:
- Нельзя применить анимацию при переходе хедера из фиксированного состояния в плавающее.
- Нельзя выбрать, какие именно блоки хедера должны быть плавающими, а какие - оставаться фиксированными. Например, если в хедере вашей темы присутствует текстовое объявление или навигация сайта, то все эти блоки в составе общего хедера будут также плавающими.
- Поддержка браузерами свойства sticky не абсолютная. В большинстве, старые версии браузеров не поддерживают это свойство. Это означает, что в таких браузерах ваш хедер останется фиксированным, как будто вы не применяли к нему свойство "sticky". На текущий момент свойство будет работать у 95% пользователей браузеров. Здесь вы можете увидеть актуальные сведения о поддержке свойства "sticky".
Если вы установили в свой магазин одну из бесплатных Шопифай-тем, а техника плавающего хедера там не внедрена, вам достаточно добавить следующий код в секцию header.liquid вашей темы (в начале или в конце файла):
<style>
#shopify-section-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
background-color: white; /* Указываем фоновый цвет хедера на случай, если он прозрачный */
}
</style>
Если же в вашем магазине установлена кастомная или платная тема, вам стоит обратиться к разработчикам или поддержке своей темы. Или же просто оставьте в комментариях ссылку на свой магазин, чтобы мы помогли вам найти решение.
Оставить комментарий