Очень часто на сайтах с большим количеством контента посетитель теряется на странице и чтобы найти навигационное меню приходится листать на самый верх страницы. Технологии не стоят на месте, экраны мониторов и их разрешения становятся больше, потому сейчас на сайте уже не жалко выделить сверху 40 пикселей под фиксированное меню при прокрутке страницы сайта. Посетитель сможет всегда видеть в каком он разделе находится, а также иметь быстрый доступ к навигационному меню. В конце концов это увеличивает глубину просмотра сайта 🙂
Какова суть фиксированного навигационного меню на сайте? Изначально наше меню находится на привычном ему месте, где-то в шапке, в моем случае на расстоянии 140px от верхнего края. Как только посетитель прокручивает страницу на эти самые 140px внизу, меню фиксируется в самом верху окна и там остается все оставшееся время, пока скролл не будет возвращен вновь в верхнее положение.
Фиксированное меню при прокрутке страницы это по сути панель управления, которая всегда с тобой. Меню у нас будет простое, без выпадающих элементов.
От теории к практике. Все достаточно просто и минималистично, большая часть когда отдается стилям, которые вы уже сами настраиваете под себя. Я сделала фиксированное меню как на рисунке, при скролле цвет меню становится чуть прозрачным, чтобы оно не выглядело тяжелым и под ним был виден контент.
Наши стили. У меня меню шириной 1180px, расположено по центру. Шапка высотой 180px, меню с прокруткой в него входит и занимает 40px. Значит расстояние от верха 140px. Запомним это число)
И вот те несколько строчек кода, которые творят волшебство) Мы задаем условия прокрутки страницы, выше 140px или ниже. В зависимости от этого присваивается класс fixed для нашего навигационного меню. А с этим классом, как указано выше мы делаем меню фиксированным и закрепленным сверху.
Число 140 вы можете заменить на любое другое. Это ваш отступ меню от верхнего края.
- 2019-12-24
- 24
- Января
2015
Доброго времени суток 🙂
Сегодня речь пойдет о способе, как можно организовать фиксированное меню при прокрутке страницы. У меня уже есть статья о таком меню здесь Меню ( блок ) с плавающей фиксацией ( jQuery ), но данный способ немного отличается. В прошлом примере, при прокрутке — меню стояло на своем месте, а когда подходило до верхушки, то прилипало и оставалось уже там до самого конца. Данный же способ выглядит немного иначе. При прокрутке меню скрывается, а потом плавно появляется сверху. Вот пример. 
Ну что же, приступим 🙂
1. HTML разметка
Первое что мы сделаем, это вставим наш HTML код в том месте Вашего сайта, где вы хотите видеть меню.
Меню присваивается класс default, благодаря которому наш jquery сможет потом определить что именно этот блок потом нужно закрепить сверху.
2. jQuery код
В шапке перед закрывающимся head вставляем код. Как я писал выше, он определить блок с классом default и после прокрутки присваивает ему класс fixed. Можете поменять названия классов, если это Вам нужно. Но только внимательно и не пропустите ничего, иначе все попросту перестанет работать. Менять нужно в jQuery, HTML и CSS.
3. Библиотека jQuery
Возможно у Вас уже это сделано и Вы можете пропустить этот пункт, чтобы не произошло конфликта. Если же нет, то вставьте перед скриптом из пункта №2 следующий код.
4. CSS стили
Для того чтобы все выглядело красиво и конечно, же правильно работало, вставляем в Ваш файл стилей следующий код.
Если все сделано правильно, то у Вас должно быть как в примере. Исходники скачать можете, нажав на ссылку ниже.
На этом все, спасибо за внимание 🙂
Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты 🙂
Интересует не простой момент, по факту меню должно появиться после прокрутки на определенное количество пикселей. Но есть одно но, оно должно сформироваться только после прокрути, и ранее не должно показываться на сайте. При скролинге наверх должно удаляться полностью, т.к вверху уже есть меню. К сожалению примера показать не могу так как просто не нашел его.
Скрипт использую такой:
Отсюда следует что при прокрутке в 150px закрепиться меню.
Как сделать на основе этого скрипта что бы при прокрутке меню формировалось??
Народ сильно не пинайте если не доходчиво описал проблему)
Загрузка...
