Плавающий (липкий) хедер в Shopify-теме


Плавающий (липкий) хедер в Shopify-теме


Плавающий (липкий) хедер упрощает навигацию по сайту. С технической точки зрения, наиболее часто эту технику реализуют с помощью 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>

Если же в вашем магазине установлена кастомная или платная тема, вам стоит обратиться к разработчикам или поддержке своей темы. Или же просто оставьте в комментариях ссылку на свой магазин, чтобы мы помогли вам найти решение.


Оставить комментарий


Комментарий будет опубликован после модерации


Содержание
x

Плавающий (липкий) хедер в Shopify-теме