- Бочарникова Н. И.
- Уроки по jQuery
- Просмотров: 3990
jQuery. Как создать неисчезающее главное меню
В этом уроке я покажу, как, с помощью jQuery можно закрепить главное меню на странице сайта так, что бы при прокрутке оно не исчезало, а всегда находилось в верхней части экрана браузера.
Это бывает необходимо, когда страницы Web-сайта большие и приходится часто переходить по ссылкам. Пользователю будет удобно нажать на нужный ему пункт меню не возвращаясь в начало страницы.
Для того, что бы закрепить меню Web-страницы на экране браузера можно воспользоваться стандартной библиотекой jQuery и модулем stiky и добавляем CSS класс в ото место страницы, где находится меню.
Как это сделать:
- Скачайте по ссылке архив с рабочим примером и распакуйте его.
- Скрпируйте папку JS в корневую папку вашего сайта.
- В разделе HEAD вашей Web-страницы вставьте код подключения библиотеки jQuery и нужного модуля:
<script src="/js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="/js/jquery.sticky.js" type="text/javascript"></script> - В этом же разделе вставьте скрипт следующего содержания:
<script type="text/javascript">
$(window).load(function(){
$(".navigation").sticky({ topSpacing: 0, center:true, className:"hey" });
});
</script>
Параметр topSpacing в третьей строке скрипта определяет отступ удерживаемого меню от верхней границы экрана. В данном случае он = 0, т.е. всегда должен оставаться у самого края страницы. - При необходимости измените параметры скрипта, сохраните страницу и проверте рабту.