В этом уроке я покажу, как, с помощью jQuery можно закрепить главное меню на странице сайта так, что бы при прокрутке оно не исчезало, а всегда находилось в верхней части экрана браузера.
Это бывает необходимо, когда страницы Web-сайта большие и приходится часто переходить по ссылкам. Пользователю будет удобно нажать на нужный ему пункт меню не возвращаясь в начало страницы.
Для того, что бы закрепить меню Web-страницы на экране браузера можно воспользоваться стандартной библиотекой jQuery и модулем stiky и добавляем CSS класс в ото место страницы, где находится меню.
Как это сделать:
- Скачайте по ссылке архив с рабочим примером и распакуйте его.
- Скрпируйте папку JS в корневую папку вашего сайта.
- В разделе HEAD вашей Web-страницы вставьте код подключения библиотеки jQuery и нужного модуля:
- В этом же разделе вставьте скрипт следующего содержания:
Параметр topSpacing в третьей строке скрипта определяет отступ удерживаемого меню от верхней границы экрана. В данном случае он = 0, т.е. всегда должен оставаться у самого края страницы.
- При необходимости измените параметры скрипта, сохраните страницу и проверте рабту.
Добавить комментарий: