Урок 88.1. Плагины для фиксирования меню при прокрутке

Плагины для фиксирования меню при прокруткеОдностраничные сайты – популярное явление, но оно не лишено недостатка: при прокрутке длинной записи меню уходит далеко вверх. Чтобы пользователи могли быстро перейти к нужному разделу в любом месте страницы, достаточно применить такую деталь, как липкий хедер (sticky header). Некоторые темы уже включают этот элемент, в таких темах для активации достаточно нескольких секунд. Но в большинстве случаев для использования липкого хедера приходится прибегать к помощи плагинов. Но перед тем как перейти к списку плагинов, рассмотрим плюсы и минусы использования липких хедеров.

Особенности использования

Начнем с плюсов:

Быстрый доступ к навигации. Очень важный момент, особенно на страницах бесконечной прокрутки. Особенно полезен этот момент при использовании мобильных устройств, где ввиду маленького неудобного дисплея прокрутка может быть длиннее.

Лучшие показатели аналитики. Улучшение навигации способно сократить показатель «ненужных просмотров». В то же время увеличится количество просматриваемых страниц при каждом отдельном посещении веб-ресурса.

Брендинг. В хедере располагается не только меню, но и логотип. А значит это, что основная часть брендинга всегда будет располагаться перед пользователем на самом видном месте.

Минусы, как ни странно тоже есть:

Некачественное оформление. Оформить хедер – всегда нелегкая задача. Даже опытные веб-мастера нередко путаются в реализации: готовое решение может быть слишком большим, и даже при корректном отображении на десктопе, оно может казаться огромным на мобильном устройстве. В любом случае, с оформлением придется повозиться.

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

Теперь о списке плагинов, чтобы увидеть доступные решения, достаточно перейти к уроку 88.2.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Главное меню