Плавающая верхняя шапка сайта
При прокручивании страницы вниз можно сделать, чтобы шапка сайта прилипала к верхней части экрана. Это позволит повысить удобство использования сайта, т. к. в любой части экрана будут доступны основные навигационные ссылки и контактный телефон. Но важно не переусердствовать, т. к. плавающее меню уменьшает видимую область экрана вместе с полезной информацией, а также может вызвать раздражение у посетителя чрезмерной навязчивостью. В то же время цель сайта продавать, поэтому нужно найти компромиссное решение между навязчивостью и продающими качествами.
Согласно моему личному восприятию, размер плавающей шапки нужно делать не более чем от 5-10% от высоты всего окна браузера(видимой области сайта в текущий момент). При таких размерах мы не вызываем сильное раздражение и в то же время можем уместить основную информацию, способствующую повышению заказов.
Что должно быть в плавающей шапке
Если ваша статичная верхняя шапка занимает не более 5-10% от высоты окна в браузере, то ее можно просто прилепить к верху экрана в неизменном виде. Но часто верхняя шапка занимает больше пространства, чем указанные выше 5-10%, в этом случае у вас должно быть 2 верхние шапки:
1. Статичная(обычная);
2. Плавающая — сокращенная версия обычной статичной, появляющаяся после того, как вследствие прокрутки страницы статичную уже не видно.
В сокращенной плавающей верхней шапке оставляем только главное: логотип, не более 1-2 телефонов, основные ссылки меню, которые поместятся. Если все ссылки меню в плавающей шапке, которые вы хотите разместить не помещаются, то можно сделать выпадающее меню при наведении на основные разделы.
Плавающая верхняя шапка на изображении выше появляется после прокрутки страницы вниз. Представляет собой сокращенный вариант стандартной верней шапки(есть только логотип и телефон).
Плавающая верхняя шапка, также отличается от статичной и появляется только после прокрутки страницы. В отличие от статичной — уменьшено количество ссылок, чтобы не закрывать большую область экрана и не раздражать посетителя.
