Плавающее меню на jQuery

Опубликовано admin - сб, 04/07/2018 - 15:15

Самый простой способ сделать любое меню плавающим по экрану или прикреплённым к верхней части экрана: 

С помощью функции "checknav" нужно проверять величину прокрутки окна, в зависимости от чего добавлять CSS класс или удалять его. Переменные ds_loaded.sc и ds_loaded.sback нужны для предотвращения циклического запуска кода, который может быть и не таким простым, например можно добавить функции jQuery анимации.

Структура меню может быть любой, с учетом его горизонтального расположения, для примера возьмём стандартную разметку меню из Joomla 2.5:

Само меню нужно обернуть в контейнер с id "menu-top-conteiner" и задать его высоту, сделано это для того чтобы при начале перемещения меню, оставшаяся часть конвента не прыгала вверх, хотя это почти и не заметно.

Скрипт jQuery очень прост, - мы меняем CSS класс для меню, тем самым прикрепляем его к верхней части окна. CSS класс называется "top-menu-fixed":

Поместите указанный класс в css файл и подключите его на странице, удобным способом, например, так:

CSS разметка всего меню:

 

На разработку сайта! Скидки до 20%!