Фиксированное меню при прокрутке

Очень часто на сайтах с большим количеством контента посетитель теряется на странице и чтобы найти навигационное меню приходится листать на самый верх страницы. Технологии не стоят на месте, экраны мониторов и их разрешения становятся больше, потому сейчас на сайте уже не жалко выделить сверху 40 пикселей под фиксированное меню при прокрутке страницы сайта. Посетитель сможет всегда видеть в каком он разделе находится, а также иметь быстрый доступ к навигационному меню. В конце концов это увеличивает глубину просмотра сайта 🙂

Какова суть фиксированного навигационного меню на сайте? Изначально наше меню находится на привычном ему месте, где-то в шапке, в моем случае на расстоянии 140px от верхнего края. Как только посетитель прокручивает страницу на эти самые 140px внизу, меню фиксируется в самом верху окна и там остается все оставшееся время, пока скролл не будет возвращен вновь в верхнее положение. 

Фиксированное меню при прокрутке страницы это по сути панель управления, которая всегда с тобой. Меню у нас будет простое, без выпадающих элементов.

От теории к практике. Все достаточно просто и минималистично, большая часть когда отдается стилям, которые вы уже сами настраиваете под себя. Я сделала фиксированное меню как на рисунке, при скролле цвет меню становится чуть прозрачным, чтобы оно не выглядело тяжелым и под ним был виден контент.

Наш HTML:

Наши стили. У меня меню шириной 1180px, расположено по центру. Шапка высотой 180px, меню с прокруткой в него входит и занимает 40px. Значит расстояние от верха 140px. Запомним это число)

И вот те несколько строчек кода, которые творят волшебство) Мы задаем условия прокрутки страницы, выше 140px или ниже. В зависимости от этого присваивается класс fixed для нашего навигационного меню. А с этим классом, как указано выше мы делаем меню фиксированным и закрепленным сверху.

Число 140 вы можете заменить на любое другое. Это ваш отступ меню от верхнего края.

Актуальные статьи

Страница 404 в MODX Revo

Для правильной индексации содержимого сайта поисковыми системами крайне важно создать страницу ошибки 404 . Создаем ее в следующей очередности: Сначала нужно создать новый ресурс Назовем созданный документ «Страница 404» В поле содержимое ресурса вводим текст: «Ошибка 404. Данная страница отсутствует на нашем сайте Вы можете перейти на главную страницу или воспользоваться картой сайта.» Переходим в […]

Подробнее

Как запретить пользователям входить в админку ВП?

Если по каким-то причинам вы не хотите, чтобы пользователи сайта могли входить в админку (любые ссылки в wp-admin), то сделать это очень просто. Достаточно лишь добавить в файл functions.php вашей темы следующий код: //запрет доступа к админке start function wph_noadmin() { if (is_admin() && !current_user_can(‘administrator’)) { wp_redirect(home_url()); exit; } } add_action(‘init’, ‘wph_noadmin’); //запрет доступа к […]

Подробнее

Звоните:

8-903-835-04-47

Анализ сайта онлайн

Рестайлинг сайта

Если Ваш сайт устарел и не устраивает Вас - мы поможем освежить или полностью переработать его.

Поиск по сайту

Поиск по сайту