Фиксированное горизонтальное меню вверху сайта на jQuery

Фиксированное горизонтальное меню вверху сайта на jQuery

Разберем способ создания меню, зафиксированного вверху сайта. Для этого есть несколько способов – используя каскадные таблицы стилей либо jQuery. Используя CSS, можно просто закрепить меню в определенном положении. Однако такой способ недостаточно гибок, поэтому лучше прибегнуть к jQuery. При использовании jQuery меню имеет различные виды в начальном состоянии и во время прокрутки. Во время прокрутки оно будет закреплено вверху страницы.

Как создать фиксированное меню вверху сайта

До начала всех действий подключаем jQuery между тегами <head> </head>:

После этого сделаем обычный макет страницы:

Обратите внимание на то, что меню Nav присвоено состояние по умолчанию (класс default).

CSS-файл, отвечающий за оформление меню, выглядит так:

Классы .default и .fixed настраиваются исходя из текущей необходимости.

Создадим jQuery-функцию, которая заменяет в $menu класс default  на класс fixed и добавляет функцию fadeIn, отвечающую за отображение элементов на скорости «fast». Функция должна вызываться только если scrollTop больше 120 пикселей, а $menu принадлежит классу default. Аналогичную процедуру функция выполняет с классом fixed.

Демо Скачать


Один комментарий на “Фиксированное горизонтальное меню вверху сайта на jQuery

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